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

User · Accepted Answer

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 Arzumanoglu this is a great list of examples.

User · Answer

If you want control over the td s th s like you can do with block level elements  amp  floats  Its NOT possible   There is no way to make a td float over or under a th

User · Answer

Pure css way to make a table fully responsive  no JavaScript is needed  Checke demo here Responsive Tables   lt  DOCTYPE gt     lt html gt     lt head gt     lt title gt Responsive Table lt  title gt     lt style gt        only for demo purpose  you can remove it      container border  1px solid  ccc  background-color   ff0000     margin  10px auto width  98   height auto padding 5px  text-align  center        required     tablewrapper width  95   overflow-y  hidden  overflow-x  auto    background-color green   height  auto  padding  5px        only for demo purpose just for stlying  you can remove it     table   font-family  arial  font-size  13px  padding  2px 3px   table responsive  background-color  1a99e6  border-collapse  collapse    border-color   fff   tr nth-child 1  td nth-of-type 1    background  333  color   fff   tr nth-child 1  td   background  333  color   fff  font-weight  bold    table tr td nth-child 2     background yellow     tr nth-child 1  td nth-of-type 2  color   333   tr nth-child odd   background  ccc    tr nth-child even  background  fff    lt  style gt   lt  head gt   lt body gt    lt div class  container  gt   lt div class  tablewrapper  gt   lt table  class  responsive  width  98   cellpadding  4  cellspacing  1  border  1  gt    lt tr gt     lt td gt Name lt  td gt     lt td gt Email lt  td gt     lt td gt Phone lt  td gt     lt td gt Address lt  td gt     lt td gt Contact lt  td gt     lt td gt Mobile lt  td gt     lt td gt Office lt  td gt     lt td gt Home lt  td gt     lt td gt Residency lt  td gt     lt td gt Height lt  td gt    lt td gt Weight lt  td gt    lt td gt Color lt  td gt     lt td gt Desease lt  td gt     lt td gt Extra lt  td gt    lt td gt DOB lt  td gt    lt td gt Nick Name lt  td gt    lt  tr gt   lt tr gt     lt td gt RN Kushwaha lt  td gt   lt td gt rn kushwaha test com lt  td gt   lt td gt -- lt  td gt     lt td gt Varanasi lt  td gt   lt td gt - lt  td gt    lt td gt 999999999 lt  td gt    lt td gt 022-111111 lt  td gt    lt td gt - lt  td gt   lt td gt India lt  td gt    lt td gt 165cm lt  td gt    lt td gt 58kg lt  td gt    lt td gt bright lt  td gt    lt td gt -- lt  td gt    lt td gt -- lt  td gt    lt td gt 03 07 1986 lt  td gt    lt td gt Aryan lt  td gt    lt  tr gt   lt  table gt   lt  div gt   lt  div gt   lt  body gt   lt  html gt

User · Answer

You can view this Demo or bootstrap

User · Answer

I recommend the Wordpress plugin Magic Liquidizer Responsive Table

User · Answer

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

User · Answer

To make a responsive table  you can make the width of each td  100   and insert a related heading in the td on  mobile browsers  that are less 768px width    Here is a website that demonstrates this technique  http   www quizexpo com list-of-banks-in-india

User · Answer

For make responsive table you can make 100  of each    td    and insert related heading in the    td    on the mobile less the    768px    width    See More  http   wonderdesigners com  p 227

[css] How to make responsive table

Basically

More advanced solutions

Examples related to css

Examples related to html

Examples related to responsive-design

Examples related to media-queries