2

I have a html table with slds-table class.

The table workds fine, as it had dynamic column width based on content

The Scroll goes way too long like this--

Table-Fixed

I tried using slds-truncate with slds-fixed-table but then the first column unncessarily occupies the width

Width

This is my code-

    <table class="slds-table slds-table_bordered slds-table_striped">
    <thead>
        <tr class="slds-text-title_caps">
            <th></th>
            <th class="wrapTd">Employee Name</th>
            <th class="slds-truncate responsiveHide">Birth Gender</th>
            <th class="slds-truncate responsiveHide">Age</th>
            <th class="slds-truncate responsiveHide">Dependent Coverage</th>
            <th class="slds-truncate responsiveHide">State</th>
            <th class="slds-truncate">Is Active?</th>
            <th class="slds-truncate">Actions</th>
        </tr>
    </thead>
    <aura:iteration items="{!v.census}" var="item" indexVar="itemIndex">
        <tbody>
            <tr class="slds-theme_default">    <!-- CLASS CHANGED -->   
                <td class="slds-truncate">
                    <lightning:buttonIcon value="{!itemIndex}" onclick="{!c.toggle}" iconName="{!item.expanded?'utility:chevrondown':'utility:chevronright'}" variant="shaded" />

                </td>
                <td class="slds-truncate slds-text-title slds-text-color_default" style="max-width:10%;">{!item.Name}</td>
                <td class="slds-text-title slds-text-color_default responsiveHide">{!item.Gender}</td> 
                <td class="slds-text-title slds-text-color_default responsiveHide">{!item.Age}</td>
                <td class="slds-text-title slds-text-color_default responsiveHide">{!item.FamilyCoverage}</td>
                <td class="slds-text-title slds-text-color_default responsiveHide">{!item.State}</td>
                <td class="slds-text-title slds-text-color_default">
                    <lightning:input aura:id="chkbox" checked="{!item.isActive}" type="checkbox" disabled="true"/>
                </td>
                <td>
                    <lightning:buttonMenu variant="border-filled" menuAlignment="left"  value="{!item}" iconName="utility:down" iconSize="x-small" onselect="{!c.handleSelect}">
                        <lightning:menuItem iconName="utility:edit" label="Edit" title="Edit" value="Edit"></lightning:menuItem>
                        <!-- As discussed with Balaji 25/09, not needed for first release, future consideration
                        <lightning:menuItem iconName="utility:preview" label="View Details" title="View Details" value="View Details"></lightning:menuItem> -->
                        <lightning:menuItem iconName="utility:adduser" label="Add Dependent" title="Add Dependent" value="Add Dependent"></lightning:menuItem>
                        <aura:if isTrue="{!item.isActive}">
                            <lightning:menuItem iconName="utility:ban" label="Deactivate" title="Deactivate" value="Deactivate"></lightning:menuItem>
                        </aura:if>
                        <aura:if isTrue="{!not(item.isActive)}">
                            <lightning:menuItem iconName="utility:success" label="Activate" title="Activate" value="Activate"></lightning:menuItem>
                        </aura:if>
                    </lightning:buttonMenu>
                </td>
            </tr>
        </tbody>

Update as per max-width- DIDN'T WORK

<table class="slds-table slds-table_bordered slds-table_striped" style="width:100%">
    <thead>
        <tr class="slds-text-title_caps">
            <th></th>
            <th class="wrapTd">Employee Name</th>
            <th class="slds-truncate responsiveHide">Birth Gender</th>
            <th class="slds-truncate responsiveHide">Age</th>
            <th class="slds-truncate responsiveHide">Dependent Coverage</th>
            <th class="slds-truncate responsiveHide">State</th>
            <th class="slds-truncate">Is Active?</th>
            <th class="slds-truncate">Actions</th>
        </tr>
    </thead>
    <aura:iteration items="{!v.census}" var="item" indexVar="itemIndex">
        <tbody>
            <tr class="slds-theme_default">    <!-- CLASS CHANGED -->   
                <td class="slds-truncate">
                    <lightning:buttonIcon value="{!itemIndex}" onclick="{!c.toggle}" iconName="{!item.expanded?'utility:chevrondown':'utility:chevronright'}" variant="shaded" />

                </td>
                <td class="slds-truncate slds-text-title slds-text-color_default" style="max-width:10%">{!item.Name}</td>
2
  • Have you tried simply ensuring the table is styled with 100% width whilst setting a max-width on the individual columns (with truncate)?
    – Phil W
    Jan 22 '20 at 9:08
  • Yes, didn't work.. added code as well here.
    – mvk1991
    Jan 22 '20 at 9:37

Your Answer

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

Browse other questions tagged or ask your own question.