2

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

3
  • How about SLDS grid?
    – gs650x
    Feb 14, 2019 at 5:06
  • 1
    i got negative vote for this question.even i received popular question badge for it.This means many guys looking for similar Question. Please before doing down voting,Please think twice and do it.whatever the point we have earned it will go down.I had faced similar issue many times.So i am highlighting here Mar 21, 2020 at 5:06
  • @AnnappaPH: Saw this comment very late, I didn't downvote but downvotes may mean that you could improve asking better question. In case of this example, would have been better to provide a minimal code that doesn't has any dependency on custom objects or any other metadata, such that one can easily reproduce the issue in their own orgs.
    – Raul
    Jan 5, 2021 at 15:00

1 Answer 1

6

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>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .