-1

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

  • How about SLDS grid? – gs650x Feb 14 '19 at 5:06
2

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.