How to create: responsive tables

Learn how to create responsive tables.

Responsive table

If the screen is too small to display all the content, the responsive table will display a horizontal scrollbar.

Please adjust the size of the browser window to see the effect:

First Name Last Name Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points Points
Jill Smith 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50 50
Eve Jackson 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94 94
Adam Johnson 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67 67

To create a responsive table, add a container with overflow-x:auto of the container element:

<div style="overflow-x:auto;">
  <table>
    ...
  </table>
</div>

Try it yourself

Note:In OS X Lion (on Mac) the scrollbar is hidden by default and only appears when in use (even if "overflow:scroll" or auto is set).

Related pages

Tutorial:CSS table