function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Akhil Katkam 5Akhil Katkam 5 

Issue with the Table Data Alignment

Hi Developer Community,
We want to Display text from a single record of an object, These are stored in fields (type:text area)
There is an issue with a table alignment for one of my component.

I will be sharing the screenshot of the issue here:


User-added imageas u can see that left side field datas , those are not inclined exactly  to right side data , i need to have left and right data to be aligned in same way , left side data points to right side data 

here is the code: 
<table class="slds-table slds-table_cell-buffer slds-table_bordered slds-no-row-hover slds-table_col-bordered">
             <tbody>

               <aura:iteration items="{!v.Competition}"  var="comp">
        <tr scope="row" class="slds-box">     
            <td style="vertical-align:top;">Coverage<br/><br/>Compatibility<br/><br/>Capability<br/><br/>Creditworthiness<br/><br/>Capacity<br/><br/>Commitment</td>
            <td class="slds-cell-wrap">{!comp.ciboostc1501__Coverage__c}<br/><br/>{!comp.ciboostc1501__Compatibility__c}<br/><br/>{!comp.ciboostc1501__Capability__c}<br/><br/>{!comp.ciboostc1501__Creditworthiness__c}<br/><br/>{!comp.ciboostc1501__Capacity__c}<br/><br/>{!comp.ciboostc1501__Commitment__c}</td>
        </tr>   
 			   </aura:iteration>
            </tbody>
        
     </table>

please help me the suggestions , so that data can be aligned in the correct manner according to left side fields 

Thanks in Advance
 
ShivankurShivankur (Salesforce Developers) 
Hi Akhil,

For use cases like this SLDS provides Name => Value pairs, see this doc (https://www.lightningdesignsystem.com/utilities/name-value-list/#content) for help.

With just one class (slds-list_horizontal), you can change the layout as needed, so they can be stacked.

Your markup would look like this: 
<dl class="slds-list_horizontal slds-wrap">
  <dt class="slds-item_label slds-text-color_weak>Table Values</dt>
  <dd class="slds-item_detail">
    //Your table values or use child component with proper aligned table.
  </dd>
</dl>

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

Thanks.
Maharajan CMaharajan C
Hi Akhil,

You can try the below:

HTML: 
   
    <table class="slds-table slds-table_cell-buffer slds-table_bordered slds-table_col-bordered">
	
		<aura:iteration items="{!v.Competition}"  var="comp">
		
			<tr class="slds-hint-parent">
				<td data-label="Coverage">
					<div class="slds-truncate">Coverage</div>
				</td>
				<td data-label="Coverage">
					<div class="slds-truncate">{!comp.ciboostc1501__Coverage__c}</div>
				</td>
			</tr>
			<tr class="slds-hint-parent">
				<td data-label="Compatibility">
					<div class="slds-truncate">Compatibility</div>
				</td>
				<td data-label="Close Date">
					<div class="slds-truncate">{!comp.ciboostc1501__Compatibility__c}</div>
				</td>
			</tr>  
			<tr class="slds-hint-parent">
				<td data-label="Capability">
					<div class="slds-truncate">Capability</div>
				</td>
				<td data-label="Capability">
					<div class="slds-truncate">{!comp.ciboostc1501__Capability__c}</div>
				</td>
			</tr>  
			<tr class="slds-hint-parent">
				<td data-label="Creditworthiness">
					<div class="slds-truncate">Creditworthiness</div>
				</td>
				<td data-label="Creditworthiness">
					<div class="slds-truncate">{!comp.ciboostc1501__Creditworthiness__c}</div>
				</td>
			</tr>  
			
			<tr class="slds-hint-parent">
				<td data-label="Capacity">
					<div class="slds-truncate">Capacity</div>
				</td>
				<td data-label="Capacity">
					<div class="slds-truncate">{!comp.ciboostc1501__Capacity__c}</div>
				</td>
			</tr>  
			
			<tr class="slds-hint-parent">
				<td data-label="Commitment">
					<div class="slds-truncate">Commitment</div>
				</td>
				<td data-label="Close Date">
					<div class="slds-truncate">{!comp.ciboostc1501__Commitment__c}</div>
				</td>
			</tr>  
		</aura:iteration>
    </table>

CSS:
  
.THIS .slds-truncate{
    white-space: normal;
    word-wrap: break-word;
}

Thanks,
Maharajan.C