Kickstand UI

# Table

Kickstand UI's table utilities are designed to provide consistency with your table designs.

# Character Played By
1 Agent Michael Scarn Michael Scott
2 Golenface Jim Halpert
3 Sandra Pam Halpert
4 Samuel L. Chang Dwight Schrute
5 Jasmine Windsong Jan Levinson
<table class="table">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Character</th>
            <th scope="col">Played By</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Agent Michael Scarn</td>
            <td>Michael Scott</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Golenface</td>
            <td>Jim Halpert</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td>Sandra</td>
            <td>Pam Halpert</td>
        </tr>
        <tr>
            <th scope="row">4</th>
            <td>Samuel L. Chang</td>
            <td>Dwight Schrute</td>
        </tr>
        <tr>
            <th scope="row">5</th>
            <td>Jasmine Windsong</td>
            <td>Jan Levinson</td>
        </tr>
    </tbody>
</table>

Scope

If you are curious about the scope attribute, check out the MDN docs (opens new window) on the value they bring to your tables

# Striped

To improve the readability of your data, you can apply the striped class to your tables and every other row in the <tbody> will get a darker background to provide contrast between the rows.

# Character Played By
1 Agent Michael Scarn Michael Scott
2 Golenface Jim Halpert
3 Sandra Pam Halpert
4 Samuel L. Chang Dwight Schrute
5 Jasmine Windsong Jan Levinson
<table class="table striped">
    ...
</table>

# Hover

You can provide an additional layer of focus to your rows by adding the hover class. This will set a darker background color for the row in the <tbody> that is being hovered over.

# Character Played By
1 Agent Michael Scarn Michael Scott
2 Golenface Jim Halpert
3 Sandra Pam Halpert
4 Samuel L. Chang Dwight Schrute
5 Jasmine Windsong Jan Levinson
<table class="table striped hover">
    ...
</table>

# Responsive

Typically, large table on small displays run over the edge of the viewport and can cause undesired effects. Wrapping the table in a <div> with the class table-responsive will hide the overflow and allow the user to scroll the content without shifting the entire page.

# Character Played By
1 Agent Michael Scarn Michael Scott
2 Golenface Jim Halpert
3 Sandra Pam Halpert
4 Samuel L. Chang Dwight Schrute
5 Jasmine Windsong Jan Levinson
<div class="my-xl table-responsive">
    <table class="table">
    ...
    </table>
</div>

← Text →