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?

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

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.