2

SLDS table is not truncating the long text in table column. I have given slds-truncate class as well but its not working. 

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<table class="slds-table slds-table_bordered slds-max-medium-table_stacked-horizontal">
    <thead>
        <tr class="slds-text-title_caps">
            <th scope="col">
                <div class="slds-truncate" title="Opportunity Name">Opportunity Name</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Account Name">Account Name</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Close Date">Close Date</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Close Date">Created Date</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Close Date">Last Date</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Close Date">Close Date</div>
            </th>
            <th scope="col">
                <div class="slds-truncate" title="Close Date">Created Date</div>
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">THIS IS LONG TEXT WHICH NEEDS TO BE TRUNCATEDTHIS IS LONG TEXT WHICH NEEDS TO BE TRUNCATED THIS IS LONG TEXT WHICH NEEDS TO BE TRUNCATED THIS IS LONG TEXT WHICH NEEDS TO BE TRUNCATED</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>
        <tr>
            <th scope="row" data-label="Opportunity Name">
                <div class="slds-truncate" title="Cloudhub"><a href="javascript:void(0);">Cloudhub</a></div>
            </th>
            <td data-label="Account Name">
                <div class="slds-truncate" title="Cloudhub">Cloudhub</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
            <td data-label="Close Date">
                <div class="slds-truncate" title="4/14/2015">4/14/2015</div>
            </td>
        </tr>            
    </tbody>
</table>

enter image description here

Improve this question

1 Answer 1

Reset to default
8

Right now your table columns are not fixed; due to which the truncate does not work.

Referring to SLDS table, a simple fix would be to add slds-table_fixed-layout to your table.

<table class="slds-table slds-table_bordered 
    slds-max-medium-table_stacked-horizontal slds-table_fixed-layout">
<!-- your body goes here -->
</table>
Improve this answer
0

You must log in to answer this question.

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