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>  <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: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

May 26, 2019
·
Answer
·
Like
0
·
Follow
1

Deepali 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.

May 26, 2019
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

table alignment issue in lightning

You need to sign in to do that.