41

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.

5

8 Answers 8

48

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:

5
  • 2
    There is no any Magic as i thought. I have copied my normal CSS code for table into @media{} and change parameters to compatible with mobile screens. It's worked. I think it is correct. Here is the Demo. is that correct ? thanks for your answer. :)
    – Bishan
    Aug 26, 2013 at 7:16
  • @Bishan The demo looks good to me. Although you should only keep the code that manipulates the element. Aug 26, 2013 at 10:52
  • Sorry. manipulates the element means ?
    – Bishan
    Aug 26, 2013 at 11:10
  • @Bishan It means only the css that changes the table. So, don't just copy paste all your css code and change it. Copy only the parts that you need for the mobile version. Aug 26, 2013 at 11:14
  • Also using table-layout: fixed might help a lot. Nov 16, 2017 at 14:58
16

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

4

You can view this Demo or bootstrap

1

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

0

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

0

I recommend the Wordpress plugin Magic Liquidizer Responsive Table.

-1

Pure css way to make a table fully responsive, no JavaScript is needed. Checke demo here Responsive Tables

<!DOCTYPE>
  <html>
  <head>
  <title>Responsive Table</title>
  <style> 
  /* 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;}
</style>
</head>
<body>

<div class="container">
<div class="tablewrapper">
<table  class="responsive" width="98%" cellpadding="4" cellspacing="1" border="1">
 <tr> 
 <td>Name</td> 
 <td>Email</td> 
 <td>Phone</td> 
 <td>Address</td> 
 <td>Contact</td> 
 <td>Mobile</td> 
 <td>Office</td> 
 <td>Home</td> 
 <td>Residency</td> 
 <td>Height</td>
 <td>Weight</td>
 <td>Color</td> 
 <td>Desease</td> 
 <td>Extra</td>
 <td>DOB</td>
 <td>Nick Name</td> 
</tr>
<tr>  
<td>RN Kushwaha</td>
<td>[email protected]</td>
<td>--</td>  
<td>Varanasi</td>
<td>-</td> 
<td>999999999</td> 
<td>022-111111</td> 
<td>-</td>
<td>India</td> 
<td>165cm</td> 
<td>58kg</td> 
<td>bright</td> 
<td>--</td> 
<td>--</td> 
<td>03/07/1986</td> 
<td>Aryan</td> 
</tr>
</table>
</div>
</div>
</body>
</html>
2
  • This is only "responsive" in the barest sense of the word. It results in a table that must be scrolled horizontally when the viewport is too small. A truly responsive table would reformat so it would be entirely visible horizontally.
    – kmoser
    May 2, 2016 at 16:47
  • Going to the link and clicking live demo results in a 404. Jun 6, 2017 at 18:28
-2

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/

Not the answer you're looking for? Browse other questions tagged or ask your own question.