0

Lightning Component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" >
<div class="slds-grid slds-wrap">
    <table class="slds-table slds-table_cell-buffer slds-table_striped slds-no-row-hover">
        <tr>
            <td>
                1
            </td>
            <td>
            </td>
        </tr>
        <tr>
            <td>
                2
            </td>
        </tr>
        <tr>
            <td>
                3
            </td>
        </tr>
        <tr>
            <td>
                4
            </td>
        </tr>
        <tr>
            <td>
                5
            </td>
        </tr>
    </table>
</div>

Result:

enter image description here

Visualforce Page:

<apex:page >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <apex:slds />
    <style>
        .body{
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        }
    </style>
</head>
<body>
    <div class="slds-grid slds-wrap">
        <table class="slds-table slds-table_cell-buffer slds-table_striped slds-no-row-hover">
            <tr>
                <td>
                    1
                </td>
                <td>
                </td>
            </tr>
            <tr>
                <td>
                    2
                </td>
            </tr>
            <tr>
                <td>
                    3
                </td>
            </tr>
            <tr>
                <td>
                    4
                </td>
            </tr>
            <tr>
                <td>
                    5
                </td>
            </tr>
        </table>
    </div>
</body>

Result:

enter image description here

Is there anything I can do to make the slds-table_striped work in lightning component?

1 Answer 1

5

if you check the SLDS reference doc:

the template is a bit different from the one used previously, note that there is a scope to each row (and column, however i ommited them in my example to keep it minimalistic) as well as an slds-trucante class:

    <table class="slds-table slds-table_bordered slds-table_cell-buffer slds-table_striped">
  <tbody>
    <tr>
      <th scope="row" >
        <div class="slds-truncate">header cell 1</div>
      </th>
        <td>cell 1</td>
    </tr>
    <tr>
      <th scope="row">
        <div class="slds-truncate">header cell 2</div>
      </th>
        <td>cell 2</td>
    </tr>
  </tbody>
</table>
0

You must log in to answer this question.

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