CSS Components and Styleguide

Table Rows

Example

Add the table__row--hoverable class to a table row for hoverable rows

The Herculoids	Spiderman	Thundercats
Zandor	Firestar	Lion 'O
Tara	Iceman	Cheetara
Gloop	Lightwave	Pumyra

Add the table__row--stripe class to a table row for striped rows

The Herculoids	Spiderman	Thundercats
Zandor	Firestar	Lion 'O
Tara	Iceman	Cheetara
Gloop	Lightwave	Pumyra

Markup: tables/table-rows.html

                    <p>Add the <strong>table__row--hoverable</strong> class to a table row for hoverable rows</p>
<table class="table">
    <thead class="table__header">
        <tr class="table__row">
            <th class="table__cell">The Herculoids</th>
            <th class="table__cell">Spiderman</th>
            <th class="table__cell">Thundercats</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__row table__row--hoverable">
            <td class="table__cell">Zandor</td>
            <td class="table__cell">Firestar</td>
            <td class="table__cell">Lion 'O</td>
        </tr>
        <tr class="table__row table__row--hoverable">
            <td class="table__cell">Tara</td>
            <td class="table__cell">Iceman</td>
            <td class="table__cell">Cheetara</td>
        </tr>
        <tr class="table__row table__row--hoverable">
            <td class="table__cell">Gloop</td>
            <td class="table__cell">Lightwave</td>
            <td class="table__cell">Pumyra</td>
        </tr>
    </tbody>
</table>

<p>Add the <strong>table__row--stripe</strong> class to a table row for striped rows</p>
<table class="table">
    <thead class="table__header">
        <tr class="table__row">
            <th class="table__cell">The Herculoids</th>
            <th class="table__cell">Spiderman</th>
            <th class="table__cell">Thundercats</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table__row table__row--stripe">
            <td class="table__cell">Zandor</td>
            <td class="table__cell">Firestar</td>
            <td class="table__cell">Lion 'O</td>
        </tr>
        <tr class="table__row table__row--stripe">
            <td class="table__cell">Tara</td>
            <td class="table__cell">Iceman</td>
            <td class="table__cell">Cheetara</td>
        </tr>
        <tr class="table__row table__row--stripe">
            <td class="table__cell">Gloop</td>
            <td class="table__cell">Lightwave</td>
            <td class="table__cell">Pumyra</td>
        </tr>
    </tbody>
</table>

Source: tables/_tables.scss, line 64