function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
meghna nmeghna n 

table alignment issue in lightning

I have a piece of code inside my lightning component as follows.

<lightning:layout>
  <lightning:layoutItem size="3" padding="around-small">
                            <aura:iteration items="{!v.ratingValue}" var="rating" indexVar="indx">
                                   <aura:if isTrue="{!rating == 1}">
                                              <b>*</b>
                                   </aura:if>
                                   <aura:if isTrue="{!rating == 2}">
                                              <b>* *</b>
                                   </aura:if>
                                   <aura:if isTrue="{!rating == 3}">
                                              <b>* * *</b>
                                   </aura:if>
                                   <aura:if isTrue="{!rating == 4}">
                                              <b>* * * *</b>
                                   </aura:if>
                             </aura:iteration><br/>
                             <span><aura:text value="{!v.ratingValue}"/> ratings</span>&nbsp;&nbsp;<lightning:icon iconName="standard:sales_path" size="x-small"/><br/>
                             <span>View more or Add a review&nbsp;&nbsp;</span><lightning:icon iconName="standard:sales_path" size="x-small"/>
                         <lightning:card title="Provider Flag Information">
                         <table border="1" class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" style="width:78%;">
                                <thead>
                                    <tr>
                                        <th scope="col">
                                            <div class="slds-truncate" title="">Flag Name</div>
                                        </th>
                                        <th scope="col">
                                            <div class="slds-truncate" title="">Begin Date</div>
                                        </th>
                                        <th scope="col">
                                            <div class="slds-truncate" title="">End Date</div>
                                        </th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>
                                            <div class="slds-truncate" title="Print"><lightning:formattedText value="Print"/></div>
                                        </td>
                                        <td>
                                            <div class="slds-truncate" title="Begin Date"><ui:outputDate aura:id="beginDate" value="01/01/1990"/></div>
                                        </td>
                                        <td>
                                            <div class="slds-truncate" title="End Date"><ui:outputDate aura:id="endDate" value="11/12/2018"/></div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td>
                                            <div class="slds-truncate" title="Sample 2"><lightning:formattedText value="Sample 2"/></div>
                                        </td>
                                        <td data-label="Close Date">
                                            <div class="slds-truncate" title="Begin Date"><ui:outputDate aura:id="beginDate" value="05/05/2018"/></div>
                                        </td>
                                        <td data-label="Prospecting">
                                            <div class="slds-truncate" title="End Date"><ui:outputDate aura:id="endDate" value="11/12/2018"/></div>
                                        </td>
                                    </tr>
                                </tbody>
                            </table>
                           </lightning:card>
                        </lightning:layoutItem>
                    </lightning:layout>
               </lightning:card>

I have attached a screen shot for the same.
Table alignment

My requirement is to align the table header directly under test Text
"View more or Add a review".

Please tell me how to I can achieve this without writing external CSS.

thanks
meghna
 
Deepali KulshresthaDeepali Kulshrestha
Hi meghna,
Greetings to you!
    
- I read your problem with alignment.
- I implemented in my org and sharing below code for your problem[Solved]  : -

    <lightning:layout multipleRows="true">
            <aura:iteration items="{!v.ratingValue}" var="rating" indexVar="indx">
                <aura:if isTrue="{!rating == 1}">
                    <b>*</b>
                </aura:if>
                <aura:if isTrue="{!rating == 2}">
                    <b>* *</b>
                </aura:if>
                <aura:if isTrue="{!rating == 3}">
                    <b>* * *</b>
                </aura:if>
                <aura:if isTrue="{!rating == 4}">
                    <b>* * * *</b>
                </aura:if>
            </aura:iteration><br/>
        <lightning:layoutItem size="12" class="slds-p-left_x-large">
            <span><aura:text value="{!v.ratingValue}"/> ratings </span>
            <lightning:icon iconName="standard:sales_path" size="x-small"/><br/>
            <span>View more or Add a review</span>
            <lightning:icon iconName="standard:sales_path" size="x-small"/>
        </lightning:layoutItem>
        <lightning:layoutItem size="3" padding="around-small">
            <lightning:card title="Provider Flag Information">
                <table border="1" class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered" style="width:78%;">
                    <thead>
                    <tr>
                        <th scope="col">
                            <div class="slds-truncate" title="">Flag Name</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="">Begin Date</div>
                        </th>
                        <th scope="col">
                            <div class="slds-truncate" title="">End Date</div>
                        </th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <div class="slds-truncate" title="Print"><lightning:formattedText value="Print"/></div>
                        </td>
                        <td>
                            <div class="slds-truncate" title="Begin Date"><ui:outputDate aura:id="beginDate" value="01/01/1990"/></div>
                        </td>
                        <td>
                            <div class="slds-truncate" title="End Date"><ui:outputDate aura:id="endDate" value="11/12/2018"/></div>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div class="slds-truncate" title="Sample 2"><lightning:formattedText value="Sample 2"/></div>
                        </td>
                        <td data-label="Close Date">
                            <div class="slds-truncate" title="Begin Date"><ui:outputDate aura:id="beginDate" value="05/05/2018"/></div>
                        </td>
                        <td data-label="Prospecting">
                            <div class="slds-truncate" title="End Date"><ui:outputDate aura:id="endDate" value="11/12/2018"/></div>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </lightning:card>
        </lightning:layoutItem>
    </lightning:layout>
    
I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.

Thanks and Regards,
Deepali Kulshrestha.