function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
NanduNandu 

HTML table slds is not working properly


<table class="slds-table slds-table_cell-buffer slds-table_bordered">
            <thead>
                <tr class="slds-line-height_reset slds-border--bottom">
                    <th class="" scope="col"><ui:inputCheckbox/></th>
                    <th class="" scope="col">
                         <div class="slds-truncate " title="Name">Name</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Industry</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Phone</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Rating</div>
                    </th>
                </tr>
            </thead>
            <aura:iteration items="{!v.accounts}" var="ac">
                <tr class="slds-hint-parent">
                    <td class="slds-truncate"><ui:inputCheckbox aura:id="checkbox" change="{!c.handleCheckbox}"/></td>
                    <td class="slds-truncate">{!ac.Name}</td>
                    <td class="slds-truncate">{!ac.Industry}</td>
                    <td class="slds-truncate">{!ac.Phone}</td>
                    <td class="slds-truncate">{!ac.Rating}</td>
                </tr>
            </aura:iteration>
        </table>

output:

User-added image


Expected output:
User-added image

Thanks&Regards
Mahesh
 
Best Answer chosen by Nandu
NanduNandu
 <div style="padding-left:30px;margin-top:20px">
        <div>
            Selecte Records : {!v.selected}
        </div><br/>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <tr class="slds-text-title_caps" style="background-color:LightGray !important;font-weight: bold !important">
                    <th class="" scope="col"><ui:inputCheckbox/></th>
                    <th class="" scope="col">
                         <div class="slds-truncate " title="Name">Name</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Industry</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Phone</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Rating</div>
                    </th>
                </tr>
            <tbody>
                <aura:iteration items="{!v.accounts}" var="ac">
                    <tr class="slds-hint-parent">
                        <td class="slds-truncate"><ui:inputCheckbox aura:id="checkbox" change="{!c.handleCheckbox}"/></td>
                        <td class="slds-truncate">{!ac.Name}</td>
                        <td class="slds-truncate">{!ac.Industry}</td>
                        <td class="slds-truncate">{!ac.Phone}</td>
                        <td class="slds-truncate">{!ac.Rating}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
        <div class="slds-clearfix">
            <div class="slds-page-header" role="banner">
                <div class="slds-float_right">
                    <lightning:button  variant="brand" aura:id="firstPage" label="First" onclick="{!c.handleFirst}" />            
                    <lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}" />            
                    <lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/>
                </div>
                <p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.totalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p>
            </div>
        </div>
    </div>

All Answers

NanduNandu
 <div style="padding-left:30px;margin-top:20px">
        <div>
            Selecte Records : {!v.selected}
        </div><br/>
        <table class="slds-table slds-table_cell-buffer slds-table_bordered">
                <tr class="slds-text-title_caps" style="background-color:LightGray !important;font-weight: bold !important">
                    <th class="" scope="col"><ui:inputCheckbox/></th>
                    <th class="" scope="col">
                         <div class="slds-truncate " title="Name">Name</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Industry</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Phone</div>
                    </th>
                    <th class="" scope="col">
                         <div class="slds-truncate" title="Name">Rating</div>
                    </th>
                </tr>
            <tbody>
                <aura:iteration items="{!v.accounts}" var="ac">
                    <tr class="slds-hint-parent">
                        <td class="slds-truncate"><ui:inputCheckbox aura:id="checkbox" change="{!c.handleCheckbox}"/></td>
                        <td class="slds-truncate">{!ac.Name}</td>
                        <td class="slds-truncate">{!ac.Industry}</td>
                        <td class="slds-truncate">{!ac.Phone}</td>
                        <td class="slds-truncate">{!ac.Rating}</td>
                    </tr>
                </aura:iteration>
            </tbody>
        </table>
        <div class="slds-clearfix">
            <div class="slds-page-header" role="banner">
                <div class="slds-float_right">
                    <lightning:button  variant="brand" aura:id="firstPage" label="First" onclick="{!c.handleFirst}" />            
                    <lightning:button disabled="{!v.PageNumber == 1}" variant="brand" aura:id="prevPage" label="Prev" onclick="{!c.handlePrev}" />            
                    <lightning:button disabled="{!v.PageNumber == v.TotalPages}" aura:id="nextPage" variant="brand" label="Next" onclick="{!c.handleNext}"/>
                </div>
                <p class="slds-page-header__title">{!v.RecordStart}-{!v.RecordEnd} of {!v.totalRecords} | Page {!v.PageNumber} of {!v.TotalPages}</p>
            </div>
        </div>
    </div>
This was selected as the best answer
Haider NaseemHaider Naseem
Hi Nandu, 

I am facing the exact same issue but not able to resolve. I have tried applying the slds classes just as you did but the styling does not appear. Can you show how you have used the lightningStyleSheets and apex:slds tags in your scenario?