Create a Responsive HTML Table

Many websites and apps have data tables. Data tables are simply just that, tables that consist of data – typically at least two (2) rows and two (2) columns. Instead of using the table HTML element, many websites will use the div HTML element. This is okay for small amount of data, but for a data table that has dozens of rows and or columns, using the div class many not be desirable or wanted.The problem using the table HTML element to build data tables? Making the table responsive. In this day and age, responsive design is everything. In 2014 more and more companies are making a goal in making their website fully responsive. Why? Because more and more individuals are using mobile devices, and these mobile devices do not have the screen resolution to support all HTML elements.

Example of a non-responsive HTML data table

Example 1: Example of a non-responsive HTML data table.

So is there a solution? Yes. Mobile devices will allow us to scroll vertically – downwards and upwards and we can use CSS media queries to make the horizontal scroll-able as well. See below.

Preferred example of a responsive HTML data table

Example 2: A preferred responsive HTML table that is horizontally scroll-able.

The preferred responsive HTML table kind-of looks like it’s a table within an iframe, but doesn’t use an iframe; so it’s fully search engine friendly.

Of course, you can simply make the table width equal to 100% and viewport to scale the website, but this won’t look pretty for a massive data table and makes the end user waste time by adjusting the size. See below.

Responsive table but not desired

Example 3: A responsive HTML table but not desired.

As you can see in examples 2 and 3, both tables are responsive, however my table is not stuffed together and does not occupy more room because the text is shoved down.

So, let me show you how-to create a preferred responsive HTML table. See above: Example 2

Responsive Table CSS

Firstly, we are going to define a max width this responsive HTML table CSS will target. This is because we do not need to target large screen widths; we are more interested in mobile devices like tablets and smartphones. You can change the max-width if you wish.

@media (max-width: 767px) { }

Next, we will add the CSS that will make the table responsive.

.table-responsive { width: 100%; margin-bottom: 10px; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; }

We are going to make sure the table will be 100% of its width. I’ve added a margin-bottom, so anything below it not to close to the table – this is a proximity design principle. You may need to adjust the margin-bottom. Next, we are going to make the table horizontally scroll-able upon touch.

You’re done when it comes to the CSS! So now we have the CSS that looks like this:

@media (max-width: 767px) { .table-responsive { width: 100%; margin-bottom: 15px; overflow-y: hidden; overflow-x: scroll; -ms-overflow-style: -ms-autohiding-scrollbar; -webkit-overflow-scrolling: touch; } }

Responsive Table HTML

The HTML for the responsive table is simple. We will wrap the table with a div HTML element that has a attribute class of table-responsive. So, your table’s HTML will look like this:

… your table’s HTML goes here …


That’s it!