While working on the new Qgiv site, I found we had a need for tables that would scale down well since it’s responsive. I wasn’t a huge fan of the options available and I just wanted something a little more simple.

The technique hasn’t been tested on a ton of devices, and I know for a fact there will be issues in older versions of Android Browser because of it’s lack of overflow support. If you want to read more about that, Kyle Barrow wrote a nice article about overflow support in mobile browsers. In a nutshell, what we’ll be doing is wrapping our table in a <div> and applying some overflow CSS to it so that it scrolls horizontally on smaller screens.

The Code

Here’s some sample markup for the table:

<div class="table-container">
    <table class="data-table">
        <thead>
            <tr>
                <th>A Heading</th>
                <th>A Longer Heading</th>
                <th>A Really Really Really Long Heading</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
                <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</td>
            </tr>   
            ...
        </tbody>
    </table>
</div>

And here’s the small bit of CSS you’d apply to the table container:

overflow-y: scroll;
-webkit-overflow-scrolling: touch; // smoother scrolling

To improve the code a bit, we’ll add a little more CSS to make sure this only gets applied on smaller screens:

@media screen and (min-width: 900px){
    .table-container {
        overflow: visible;
    }
}

Final code: View the Demo

Overall, this seems to work fairly well with the devices I was able to test with. Drop a comment and let me know what you think!