O'Reilly logo

Responsive Web Design with jQuery by Gilberto Crespo

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Horizontal overflow

This technique works by freezing the first column, allowing you to scroll down the other columns under it. This way we keep seeing the first column content for each row, which permits left scrolling, to see the remaining content in order to make data comparison easier.

This table is recommended for tables that have a greater number of columns and the content of the first column is more important than others. Let's clarify how it will look by practicing it in the next example.

How to do it

We will start by downloading the solution from http://zurb.com/playground/responsive-tables. After that, let's create a new HTML file and include the CSS stylesheet inside the <head> tag:

<link rel="stylesheet" href="css/responsive-tables.css"> ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required