# Table Utility Classes

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	Real Name
1	Agent Michael Scarn	Michael Scott	Steve Carell
2	Golenface	Jim Halpert	John Krasinski
3	Sandra	Pam Halpert	Jenna Fischer
4	Samuel L. Chang	Dwight Schrute	Rainn Wilson
5	Jasmine Windsong	Jan Levinson	Melora Hardin

<div class="table-responsive">
    <table class="table">
    ...
    </table>
</div>

# Fixed Heading

If you have a long table and would like the heading of the table to follow the user down as the scroll, you can add the fixed-heading class to your table.

#	Character	Played By	Real Name
1	Agent Michael Scarn	Michael Scott	Steve Carell
2	Golenface	Jim Halpert	John Krasinski
3	Sandra	Pam Halpert	Jenna Fischer
4	Samuel L. Chang	Dwight Schrute	Rainn Wilson
5	Jasmine Windsong	Jan Levinson	Melora Hardin

<table class="table fixed-heading">
    ...
</table>

WARNING

Because of restrictions in position: sticky spec, the fixed heading feature will not work in a responsive table.

# Fixed Column

If you have an especially table that requires horizontal scrolling, you can also fix the first column so it will follow the user as they scroll using the fixed-column class.

#	Character	Played By	Real Name
1	Agent Michael Scarn	Michael Scott	Steve Carell
2	Goldenface	Jim Halpert	John Krasinski
3	Sandra	Pam Halpert	Jenna Fischer
4	Samuel L. Chang	Dwight Schrute	Rainn Wilson
5	Jasmine Windsong	Jan Levinson	Melora Hardin

<table class="table fixed-column">
    ...
</table>

← Spacing Text →