Image:
In this image, The edges are not cutted very properly.I really Look some thing like this. I have tried using "slds-box" still issue is same.
How to do like this:
Lightning code:
<div class="slds-form-element"> <!-- form div -->
<div class="slds-text-body_small slds-truncate">Create CS Case Health Check</div>
<div class="slds-text-heading--small slds-truncate">Create CS Case Health Check for selected cases</div>
<h3 class="slds-section-title--divider ">Details</h3>
<div class="slds-box">
<table class="slds-table slds-table--bordered slds-table_fixed-layout">
<thead>
<tr class="slds-text-title--caps">
<th scope="col">
<div class="slds-truncate" title="Case Number">Case Number</div>
</th>
<th scope="col">
<div class="slds-truncate" title="Case Owner Name">Case Owner Name </div>
</th>
<th scope="col">
<div class="slds-truncate" title="Buisness Unit">Buisness Unit</div>
</th>
<th scope="col">
<div class="slds-truncate" title="CS case Helath check record Type">CS case Helath check record Type</div>
</th>
</tr>
</thead>
<tbody>
<aura:iteration items="{!v.caseSerExcList}" var="rec">
<tr>
<th scope="row" data-label="Case Number">
<a href="{!'/one/one.app?#/sObject/'+ rec.cases.Id + '/view'}">
<div class="slds-truncate" id="{!rec.cases.Id}">{!rec.cases.CaseNumber}</div>
</a>
</th>
<th scope="row" data-label="Case Owner Name">
<div class="slds-truncate" >{!rec.cases.Owner.Name}</div>
</th>
<td data-label="Buisness Unit">
<div class="slds-truncate">{!rec.cases.GSS_Business_unit__c}</div>
</td>
<td data-label="CS case Helath check record Type">
<lightning:select aura:id="recordType" value="{!rec.RecordTypeId}" >
<aura:iteration items="{!rec.recTypeList}" var="recordType">
<option value="{!recordType.value}">{!recordType.label}</option>
</aura:iteration>
</lightning:select>
</td>
</tr>
</aura:iteration>
</tbody>
</table>
</div> <!-- slds box end -->
<div class="slds-box">
<div class="slds-section-title">Select CS Case Health Check Champion </div>
<div class="slds-col slds-size_1-of-3">
<label class="slds-p-top_xx-small">CS Case Health Check Champion </label>
<div class="{! v.showvalidation? 'slds-show':'slds-hide'}" style="color:red; font-weight: bold">
Please select the user before clicking Create records:
</div>
<c:GSS_customLookup objectAPIName="User" IconName="standard:user" selectedRecord="{!v.selectedLookUpRecord}" />
</div>
</div>
Its lightning style issue or slds is working like that only???.Any one please suggest me what I have missed it
Best Answer
slds-table
does not have borders, you could use SLDS border classes for your table to have left and right border. Example: