Sign Up ›

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
John NeffJohn Neff 

Lightning Design System: Table row-height inconsistent- how do I fix?

Hello, 

I am working on a LEX rollout at my company and have created a table that is displayed on the home page.  I followed the guidelines here to style the table: https://www.lightningdesignsystem.com/components/data-tables and was succesful for the most part- except my table rows are displaying at twice the height that they should be.   

Is there a problem with my page markup that is causing this?  I am trying to make my table look identical to the one here: https://www.lightningdesignsystem.com/components/data-tables

Here is my page: 
  
<apex:page controller="WeeklyOweController" lightningStylesheets="true">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">

<head>
  <meta charset="utf-8" />
  <meta http-equiv="x-ua-compatible" content="ie=edge" />
  <title>Salesforce Lightning Design System Trailhead Module</title>
  <meta name="viewport" content="width=device-width, initial-scale=1" />

  <!-- Import the Design System style sheet -->
  <apex:slds />
</head>
<body>

<div class="slds-scope">

<b>Post-Pays</b>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">  
<thead>
<tr class="slds-text-title_caps">
<th scope="col"><div class="slds-truncate" title="Buyer Name">Buyer Name</div></th> 
<th scope="col"><div class="slds-truncate" title="Age">Age</div></th> 
<th scope="col"><div class="slds-truncate" title="Funds Due">Funds Due</div></th>  
<th scope="col"><div class="slds-truncate" title="Account Balance">Account Balance</div></th></tr>
</thead>
<tbody>
 <apex:variable var="TotalOwe" value="{!0}"/>
<apex:repeat value="{!listOfPost}" var="pst">
<tr>
<td>  <div class="slds-truncate" title="BuyerNameVal">{!LEFT(pst.Buyer_Name__c,35)}</div> </td> 
<td> <div class="slds-truncate" title="DaysOpenVal">{!pst.Days_Open__c}</div></td> 
<td> <div class="slds-truncate" title="BalanceCollVal"> $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pst.Balance_to_Collect__c,0)}"/> </apex:outputText> </div></td>  
<td style="{!if(pst.AcctBal__c < 0,'color: #D84D44','color: #040404')}"><div class="slds-truncate" title="AcctBalVal"> $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pst.AcctBal__c,0)}"/> </apex:outputText></div></td>
</tr>
<apex:variable var="TotalOwe" value="{!TotalOwe+pst.Balance_to_Collect__c}"/>
</apex:repeat>
<tr>
<td><div class="slds-truncate" title="TotalDue"><b>Total Due:</b>  </div></td> 
<td><div class="slds-truncate" title="Spacer1"> </div></td> 
<td><div class="slds-truncate" title="TotalDueVal"> <apex:outputText style="font-weight:800" value="${0, number}"> <apex:param value="{!TotalOwe}" />    </apex:outputText></div> </td>  
<td><div class="slds-truncate" title="Spacer2"> </div></td></tr>
   </tbody>
</table>   
<br/>
<br/>
<b>Pre-Pays</b>
<table class="slds-table slds-table_bordered slds-table_cell-buffer">  
<thead>
<tr class="slds-text-title_caps">
<th scope="col"><div class="slds-truncate" title="Buyer Name">Buyer Name</div></th> 
<th scope="col"><div class="slds-truncate" title="Age">Age</div></th> 
<th scope="col"><div class="slds-truncate" title="Funds Due">Funds Due</div></th>  
<th scope="col"><div class="slds-truncate" title="Account Balance">Account Balance</div></th></tr>
</thead>
<apex:variable var="TotalPre" value="{!0}"/>
<apex:repeat value="{!listOfPre}" var="pre">
<tr>
<td> <div class="slds-truncate" title="BuyerName2"> {!pre.Buyer_Name__c}</div> </td> 
<td><div class="slds-truncate" title="Age2">{!pre.Days_Open__c}</div></td> 
<td><div class="slds-truncate" title="BalColl2"> $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pre.Balance_to_Collect__c,0)}"/></apex:outputText></div></td>
<td style="{!if(pre.AcctBal__c < 0,'color: #D84D44','color: #040404')}"><div class="slds-truncate" title="AcctBal2">  $<apex:outputText value="{0, number, #,###}"> <apex:param value="{!ROUND(pre.AcctBal__c,0)}"/> </apex:outputText></div></td>
</tr>
<apex:variable var="TotalPre" value="{!TotalPre+pre.Balance_to_Collect__c}"/>
</apex:repeat>
<tr>
<td><div class="slds-truncate" title="GrandTotal2"><b>Total Due:</b>  </div></td> 
<td><div class="slds-truncate" title="Spacer3"> </div></td> 
<td><div class="slds-truncate" title="TotalVal2"><apex:outputText style="font-weight:800" value="${0, number}"> <apex:param value="{!TotalPre}" />   </apex:outputText> </div></td>  
<td><div class="slds-truncate" title="Spacer4"> </div></td></tr>
</table> 
</div>
</body> 
</html>
</apex:page>


I would really appreciate any help! 

Thanks, 
​

John