How to make responsive table

You can view this Demo or bootstrap

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.

Check the below links for responsive table:

http://css-tricks.com/responsive-data-tables/

http://zurb.com/playground/responsive-tables

http://zurb.com/playground/projects/responsive-tables/index.html