+ Start a Discussion
Prince VenkatPrince Venkat 

LWC Componet Css style

Hi
How to decrease the Actual  width of  Candidate Position,Candidate Location , Address Type,  More width of Available, Flexible should be displayed

Thanks in advance


<div class='slds-grid slds-wrap' >
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Candidate Position">View Record</div>
                          
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Candiadate Location">Name</div>
                      </th>
                     
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Address Type">Address Type</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Location">Location</div>
                         
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Phone">Phone</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Email">Email</div>
                          
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Fax">Fax</div>
                      </th>
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center; width: 150px; " title="Available">Available</div>
                          
                      </th>
                      
                      <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center; width: 150px; " title="Flexible ">Flexible</div>
                          
                      </th>
                      
                     <th class="slds-size_1-of-10" scope="col">
                            <div class="slds-truncate slds-box slds-box_x-small slds-text-align_center slds-m-around_x-small" style="text-align:center" title="Exceed Limit">Exceed Limit</div>
                          
                      </th>

</div>
ShivankurShivankur (Salesforce Developers) 
Hi Venkat,

Check out the style formats available in Lightning Design System:
https://www.lightningdesignsystem.com/utilities/sizing/

You should be able to modify the similar to achieve your particular business requirement.

Hope above information helps. Please mark as Best Answer so that it can help others in future.

Thanks.