html - How to make responsive table -
i have table represent data in html page. i'm trying make table responsive. how can ?
here demo
.
basically
a responsive table 100% width table.
you can set table css:
.table { width: 100%; }
you can use media queries show/hide/manipulate columns according screens dimensions adding class (or targeting using nth-child
, etc):
@media screen , (max-width: 320px) { .hide { display: none; } }
html
<td class="hide">not important</td>
more advanced solutions
if have table lot of data , make readable on small screen devices there many other solutions:
- css-tricks.com offers this article handling large data tables.
- zurb ran issue , solved it using javascript.
- footables great jquery plugin helps out issue.
- as posted elvin arzumanoğlu great list of examples.
Comments
Post a Comment