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