Responsive Tables Examples

This responsive tables method was taken from the jQuery Mobile Reflow widget and converted into a custom jQuery plugin.

To implement, ensure your tables have a <thead> and <tbody> and add the data-role="table" attribute to the table tag.

Also ensure your table has, at minimum, the "ui-responsive" class applied to it. The other "table-stripe" class is simply for aesthetics and is optional.

File Downloads

• CSS - Compressed
• CSS - Uncompressed
• JS - Compressed
• JS - Uncompressed

<link href="css/mdgov_responsiveTables.min.css" rel="stylesheet" />

...

<script src="js/mdgov_responsiveTables.min.js"></script>

...

<table data-role="table" class="ui-responsive table-stripe">
    <thead>
        <tr>
            <th>&nbsp;</th>
            <th scope="col">Column 1</th>
            <th scope="col">Column 2</th>
            <th scope="col">Column 3</th>
            <th scope="col">Column 4</th>
            <th scope="col">Column 5</th>
            <th scope="col">Column 6</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">Row 1</th>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
        <tr>
            <th scope="row">Row 2</th>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
        <tr>
            <th scope="row">Row 3</th>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
            <td>Column Content</td>
        </tr>
    </tbody>
</table>

Live Demo

<div class="mdgov_OverflowTable">
    <table class="ui-table table-stripe">
        <thead>
            <tr>
                <th>&nbsp;</th>
                <th scope="col">Column 1</th>
                <th scope="col">Column 2</th>
                <th scope="col">Column 3</th>
                <th scope="col">Column 4</th>
                <th scope="col">Column 5</th>
                <th scope="col">Column 6</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">Row 1</th>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
            </tr>
            <tr>
                <th scope="row">Row 2</th>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
            </tr>
            <tr>
                <th scope="row">Row 3</th>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
                <td>Column Content</td>
            </tr>
        </tbody>
    </table>
</div>

div.mdgov_OverflowTable {
    width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}
div.mdgov_OverflowTable table {
    width: 100%;
    white-space: nowrap; /* Optional */
}

Live Demo

Swipe left to scroll-reveal table