Last updated: May 12, 2015

Fuselage elegantly handles tables across all device size, and here is how to do it.

Building Responsive Tables

Javascript-free responsive tables are built into Fuselage, and are easy to use. Simply add small-responsive, medium-responsive, large-responsive, xlarge-responsive, or responsive classes to your tables. Your table will be in the responsive view until you hit the media size specified (mobile first). Use the responsive class to only use the responsive view across all media sizes (there is no xxlarge-responsive class). It is important to include data-th attribute in order to have each field labelled correctly in the responsive view.

Output
This is a caption for the table
Vegetable Color Popularity Description
Tomato Red 9 Consectetur adipiscing elit. Aenean a lectus dui. Sed posuere elit sem, at eleifend massa dignissim nec.
Summer Squash Yellow 6 Aenean a lectus dui. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pumpkin Orange 5 Sed posuere elit sem, at eleifend massa dignissim nec.
Zucchini Green 7 Lorem ipsum dolor sit amet, at eleifend massa dignissim nec.
Eggplant Purple 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a lectus dui.
Vegetable Color Popularity Description
HTML
<table class="medium-responsive">
    <caption>This is a caption for the table</caption>
    <thead>
        <tr>
            <th>Vegetable</th>
            <th>Color</th>
            <th>Popularity</th>
            <th>Description</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-th="Vegetable">Tomato</td>
            <td data-th="Color">Red</td>
            <td data-th="Popularity">9</td>
            <td data-th="Description">
                Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Aenean a lectus dui. Sed posuere elit sem, at
                eleifend massa dignissim nec.
            </td>
        </tr>
        <tr>
            <td data-th="Vegetable">Summer Squash</td>
            <td data-th="Color">Yellow</td>
            <td data-th="Popularity">6</td>
            <td data-th="Description">
                Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Aenean a lectus dui. Sed posuere elit sem, at
                eleifend massa dignissim nec.
            </td>
        </tr>
        <tr>
            <td data-th="Vegetable">Pumpkin</td>
            <td data-th="Color">Orange</td>
            <td data-th="Popularity">5</td>
            <td data-th="Description">
                Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Aenean a lectus dui. Sed posuere elit sem, at
                eleifend massa dignissim nec.
            </td>
        </tr>
        <tr>
            <td data-th="Vegetable">Zucchini</td>
            <td data-th="Color">Green</td>
            <td data-th="Popularity">7</td>
            <td data-th="Description">
                Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Aenean a lectus dui. Sed posuere elit sem, at
                eleifend massa dignissim nec.
            </td>
            </tr>
        <tr>
            <td data-th="Vegetable">Eggplant</td>
            <td data-th="Color">Purple</td>
            <td data-th="Popularity">2</td>
            <td data-th="Description">
                Lorem ipsum dolor sit amet, consectetur adipiscing
                elit. Aenean a lectus dui. Sed posuere elit sem, at
                eleifend massa dignissim nec.
            </td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Vegetable</th>
            <th>Color</th>
            <th>Popularity</th>
            <th>Description</th>
        </tr>
    </tfoot>
</table>