0

Looks pretty when there is a header for every account. I have pasted the code for the latter Header and rows are completely misaligned. 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,

  • 2
    screenshots are usually quite helpful for CSS related questions, mind including one or two =) – glls Nov 13 '17 at 18:09
  • @glls Good point. :) – Json Bourne Shell Nov 13 '17 at 18:27
4

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.