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
Akhil Katkam 5Akhil Katkam 5 

How to align key-message to the right same as the row fields

Hi Developer Community, 

I am having an issue with the alignment , how to align key-message which is shown in image to the somewhat right same as the row data

User-added image
<aura:set attribute="body">
     <table class="slds-table slds-table_bordered slds-table_cell-buffer">
         
   <thead>
    <tr class="slds-text-title_caps">
        <td  class="slds-cell-wrap">
      <th scope="col">Persona</th>  
            <td class="slds-cell-wrap">  <th scope="col">Key Message</th></td>
       </td></tr>
         </thead> 
       
           <tbody>
               
    <aura:iteration items="{!v.Competition}"  var="comp">
       
        <tr scope="row">     
            <td>{!comp.ciboostc1501__Persona1__c}<br/><br/>{!comp.ciboostc1501__Persona2__c}<br/><br/>{!comp.ciboostc1501__Persona3__c}</td>      
            <td Class="slds-cell-wrap">{!comp.ciboostc1501__Key_message_1__c}<br/><br/>{!comp.ciboostc1501__Key_message_2__c}<br/>{!comp.ciboostc1501__Key_message_3__c}</td>
            </tr>
           
    
 </aura:iteration>
         </tbody>
          </table>
          </aura:set>
here is the code , please let me know how to move Key message column name to right same as row data

Thanks in Advance
 
CharuDuttCharuDutt
Hii Akhil KatKam
Try Below Code Changes Are In Bold
<aura:set attribute="body">
   <table class="slds-table slds-table_cell-buffer slds-table_bordered">
  <thead>
     <tr class="slds-text-title_caps">
        <td>
        <th scope="col">Persona</th>
        </td>
        <td>
        <th scope="col">Key Message</th>
        </td>
     </tr>
  </thead>
       
           <tbody>
               
    <aura:iteration items="{!v.Competition}"  var="comp">
       
        <tr scope="row">     
            <td>{!comp.ciboostc1501__Persona1__c}<br/><br/>{!comp.ciboostc1501__Persona2__c}<br/><br/>{!comp.ciboostc1501__Persona3__c}</td>      
            <td Class="slds-cell-wrap">{!comp.ciboostc1501__Key_message_1__c}<br/><br/>{!comp.ciboostc1501__Key_message_2__c}<br/>{!comp.ciboostc1501__Key_message_3__c}</td>
            </tr>
           
    
 </aura:iteration>
         </tbody>
          </table>
          </aura:set>
Please Mark It As Best Answer If It Helps
Thank You!

 
Suraj Tripathi 47Suraj Tripathi 47

Hi,

Please find the solution

<thead>
    <tr class="slds-text-title_caps">

        <td  class="slds-cell-wrap">
      <th scope="col">Persona</th>  </td>


            <td class="slds-cell-wrap"> 
 <th scope="col">Key Message</th></td>

      </tr>

         </thead>


you can also do some margin to move the Key message to right

<td class="slds-cell-wrap" style="margin-left:10px;"> 
 <th scope="col">Key Message</th></td>

      </tr>

If your query is solved please mark it as the Best Answer.

Thank You