[SalesForce] How to add left and right borders using slds

Image:

enter image description here

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:

enter image description here

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:

<table class="slds-table slds-border_left slds-border_right">
    <!-- table body -->
</table>
Related Topic