How to differentiate font alignment between table header and table data?

Sushi Chef schalla02
Sushi Chef
1 3 178

Hi Guys, I am working on designing smart docs. May I know how to align table headers to center where as table data to left or right however I want. Similar to the Image attached below

Code:

<table border="0" cellpadding="0" cellspacing="0" style="float:left;  font-size:13px; margin-bottom:10px; border-color: #FFFFFF;font-family: Arial Unicode MS, Helvetica, sans-serif;" svmx-data="{{$D.Parts}}" width="100%">

  <thead>

  <tr style=" height:15px;text-align: left;background-color: #FFA500;color: white;">

  <th scope="col" style="height:10px;text-align: center;" svmx-data="{{SVMXC__Product__c.ProductCode}}" width="14%">

  部品番 号</th>

  <th scope="col" style="height:10px;text-align: center;" svmx-data="{{SVMXC__Product__c.Name}}" width="35%">

  部品名</th>

  <th scope="col" style="height:10px;text-align:center;" svmx-data="{{SVMXC__Estimated_Quantity2__c}}" width="6%">

  数量</th>

  <th scope="col" style="height:10px;text-align: center;" svmx-data="

¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Estimated_Price2__c))}}" width="12%">

  単価</th>

  <th scope="col" style="height:10px;text-align: center;" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.Estimated_Line_price__c))}}" width="12%">

  金額</th>

  <th scope="col" style="height:10px;text-align: center;" svmx-data="{{$F.SNUMBER($D.Parts,'After_discount__c')}}" width="7%">

  掛率</th>

  <th scope="col" style="height:10px;text-align: center;" svmx-data="¥{{$F.LNUMBER($F.INT($D.Parts.SVMXC__Total_Estimated_Price__c))}}" width="12%">

  見積額</th>

  </tr>

  </thead>

Result(Everything is center aligning. If I change the text-align to right or left then only the headers are moving but not the data.

Untitled.png

Can anyone help me on this?

3 Comments
Employee
Employee

Godo Martinez​ can you help us here?

Sushi Chef schalla02
Sushi Chef

I used these styles for my table and was able to align the table header to center and table data to left as shown below. Now I want to move the price columns towards right. Is it possible?

.part-details table th.theader {height:10px; border:1px solid #FFA500; text-align:center;background-color: #FFA500;color: white;}
.part-details table tr td {text-align:left;border:1px solid #FFFFFF  }

Sushi Chef schalla02
Sushi Chef

By using this additional CSS styles I was able to align the columns Independently

              

                .part-details table th + th + th {text-align: right;}  

             

                .part-details table td + td + td {text-align: right;}   (aligns data from the 3rd column towards right)