How to make responsive table

Question

I have a table to represent some data in my html page. I'm trying to make this table as responsive. How can I do this?

Here is the Demo.

Answer 1

Basically

A responsive table is simply a 100% width table.

You can just set up your table with this CSS:

.table { width: 100%; }

Demo here

You can use media queries to show/hide/manipulate columns according to the screens dimensions by adding a class (or targeting using nth-child, etc):

@media screen and (max-width: 320px) {
    .hide { display: none; }
}

HTML

<td class="hide">Not important</td>

More advanced solutions

If you have a table with a lot of data and you would like to make it readable on small screen devices there are many other solutions:

• css-tricks.com offers up this article for handling large data tables.
• Zurb also ran into this issue and solved it using javascript.
• Footables is a great jQuery plugin that also helps you out with this issue.
• As posted by Elvin Arzumanoğlu this is a great list of examples.