Basically
A responsive table is simply a 100% width table.
You can just set up your table with this CSS:
.table {
width: 100%;
}<table class="table" border="1">
<thead>
<tr>
<th colspan="2">Table head</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
</tr>
</tbody>
</table>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):
/* When the screen size is bigger than 320px hide the element */
@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.