Aligning table rows and columns in two different components

Question

I have two lightning components. One which gets account's basic information on load and iterates over it and another displays the each account's basic information in a row.

Here's the code: viewAccountsList.cmp

<aura:iteration items="{!v.accountsList}" var="account" indexVar="i">
    <c:accountListItem account="{!account}" />
</aura:iteration>

accountListItem.cmp

<table class="slds-table slds-table_bordered">
    <thead>
         <th scope="col">
             <div class="slds-truncate slds-text-heading_small" title="Account Name">Account Name</div>
          </th>
          <th scope="col">
              <div class="slds-truncate slds-text-heading_small" title="Account Status">Account Status</div>
           </th>
           <th scope="col">
               <div class="slds-truncate slds-text-heading_small" title="Account Balance">Account Balance</div>
           </th>
    </thead>
    <tbody>
        <td data-label="Account Name">
            <div class="slds-truncate" title="Account Name">
                        {!v.account.name}
            </div>
        </td>
        <td data-label="Account Status">
             <div class="slds-truncate" title="Account Status">{!v.account.status}</div>
        </td>
        <td data-label="Account Balance">
            <div class="slds-truncate" title="Account Balance">{!v.account.balance}</div>
         </td>
    </tbody>
</table>

My problem is, if I write the table tag in accountListItem.cmp along with <thead> and write just the <tbody> in accountListItem.cmp the table does not align properly. The above code as it is iterating for all accounts, creates headers for all but it aligns well.

I was hoping if someone has any pointers or has solved this before.

Thank you in advance,

Answer 1

You can use sizing to force a specific size, along with a fixed table layout. Here's an example that should result in exactly even-sized columns:

<aura:application extends="force:slds">
<table class="slds-table slds-table_fixed-layout slds-table_bordered">
    <thead>
        <th class="slds-size_1-of-3" scope="col">
            <div class="slds-truncate slds-text-heading_small" title="Account Name">Account Name</div>
        </th>
        <th class="slds-size_1-of-3" scope="col">
            <div class="slds-truncate slds-text-heading_small" title="Account Status">Account Status</div>
        </th>
        <th class="slds-size_1-of-3" scope="col">
            <div class="slds-truncate slds-text-heading_small" title="Account Balance">Account Balance</div>
        </th>
    </thead>
    <tbody>
        <td data-label="Account Name">
            <div class="slds-truncate">
            Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.
            Long text field with many lines and truncation will look like this. Even though the text might go on for ages and ages.
            </div>
        </td>
        <td data-label="Account Status">
             <div class="slds-truncate" title="Account Status">Smaller value</div>
        </td>
        <td data-label="Account Balance">
            <div class="slds-truncate" title="Account Balance">Another small value</div>
         </td>
    </tbody>
</table>    
</aura:application>