How to make an html table responsive

Question

I have an html table that is created using constant contact and and I would like to make it responsive and fit the container div holding it.

Here is the demo

I tried the following but this doesn't work as well

<table border="0" width="100%" cellspacing="0" cellpadding="0">

Answer 1

Use media queries and width of your container and font sizes should be in percentage.

Answer 2

TL;DR:

I have a solution that works well for a lot of table implementations, given that you are formatting your tables well (table>thead>tr>th^^tbody>tr>td). Find my CodePen here. Depending on the data in your table, this may be a good mobilizing solution.

The Director's Cut

See my CodePen here.

This solution assumes you have built your tables nicely, meaning you are using thead with th and tbody with td. For example:

<table>
  <thead>
    <tr>
      <th>A</th>
      <th>S</th>
      <th>L</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>33</td>
      <td>M</td>
      <td>United States</td>
    </tr>
  </tbody>
</table>

Given that the table data isn't characterized by columns and columns of numeric values, this JS / CSS solution works well. You can see it in action on my employer's docs pages (SmartyStreets Documentation) and in human readable form on the CodePen snippet I built for it here. To see it working, resize the screen. Breakpoints are set differently on each implementation, because consistency. Here's how to implement it.

Tables are fed to the tableMobilizer function. Given that it is built on jQuery, this can be done for all tables on the page like so:

var tables = $(table);
tableMobilizer(tables);

You can definitely be more selective about how you mobilize tables with your selector if you need to be.

This will generate a new set of tables for each table passed in and append them after their respective source table. Each new table contains a row of a source table which is transformed with a 90 degree CCW rotation and paired with the table headings.

Old tables are dynamically classed with .hidden-small-down and new tables are classed with .hidden-medium-up for your CSS media queries.

New tables come classed with .mobile-tables (for a collection of all mobile tables generated by a single source table), .mobile-table (for each mobile table representation of a single source table row), .mobile-table-row (for a row in a mobile table), .mobile-table-key (for the first column of a mobile table), and .mobile-table-value (for the second column of a mobile table).

In your CSS, set up your media queries to hide / show the appropriate table views:

@media only screen and (min-width: 768px) {
  .hidden-medium-up {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .hidden-small-down {
    display: none;
  }
}

With the media queries implemented, styling the tables is left to your discretion.

After Credits Scene

This is not a silver bullet solution. Visualizations using tabular data can be very complicated. As mentioned above, this solution isn't great for column-heavy tables. It also doesn't handle col and row spanning. As always, seriously consider whether or not you actually need to use a table in your layout (beyond the scope of this comment). If you do, this may be a good solution for mobilizing your tables.

Answer 3

You can use bootstrap to make table responsive. Define class as table-responsive to make table as responsive.

  <div class="table-responsive">
<table class="table">
        ...
      </table>
    </div>

Answer 4

I try to make a lite rwd table extend without any other dependency libraries (ex: jQuery): https://github.com/sean1093/html-rwd-table

You can simply use as follow:

<div id="myTable"></div>

var myTable = new rwdTableExtend("myTable");
myTable.initTable();

Answer 5

I've been looking to your case and I have two answers for you. The first one is the answer to the question "¿how to make your html table responsive?" (note: Spanish article, you may need chrome page translator for example)

The second one is "you should considere a more semantic markup" (tableless) for that content. Instead of using <table> you should use <ul><li> as follows:

<ul class="itemList">
<li class="item">
<img src="" alt="" />
<p>From</p>
<p class="price">25€<span>per person sharing</span></p>
</li>
</ul>

Then use external CSS to apply style:

.itemList {width: 100%} /*probably not necessary*/
.item {display:inline-block; width: 33%; max-width: /*here your desired max width*/}
.price span {display: inline-block} /*no cells, no floats = no problems*/

Finally you can use @media queries to creat your CSS breakpoints:

@media only screen and (max-width: 480px) {
.item {display:inline-block; width: auto; max-width:100%;}/*just as an example*/
}

Just let me know if you have any further questions

Answer 6

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

      <style> 
         .tablewrapper{width: 95%; overflow-y: hidden; overflow-x: auto; 
         background-color:green;  height: auto; padding: 5px;}
    </style>

And here is HTML Part

        <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>
            </table>
        </div>

Additionally use can use jquery to add tablerapper on page load, if you don't want to manually add tableWrapper div around your table. Just use

$().ready(function(e){
    $(document).find("table.responsive").each(function(e){
        $(this).wrap("<div class="tablewrapper"></div>")
    })
})

Answer 7

Table aren't great at being responsive and keeping their layout - so it's probably best to override their styles on smaller screens, like:

http://jsfiddle.net/wildandjam/E32Cq/

@media all and (max-width:768px){
    table,tr, td, tbody, td p table div, table table{
        width:100%!important;
        float:left;
        clear:both;
        display:block;
        text-align:center;
    }
    table img {
        max-width:100%;
        height:auto;
    }
}

Answer 8

The problem here is actually with your table. As you can see, one of the bottom tables has an explicit width set, which is forcing the rest of your table to follow suit:

<table id="content_LETTER.BLOCK1" style="height: 21px;" border="0" width="798" cellspacing="0" cellpadding="0">

Notice the width="798". This will default to pixels. Get rid of any explicitly defined widths and the table should become closer to being responsive.

However, as others have said - responsive tables are tricky. Especially ones containing so many other nested tables (as in your example). You'll also need to address the responsiveness of any images within those tables, as these will likely force the table to be bigger than it needs to be. I would re-visit your whole layout here, and try and adopt a more responsive-friendly element to use throughout your page.

Update:

Please note that the reason @wildandjam's answer 'works' is essentially because he's overwritten the set width of all of your table elements. It's a quick fix but in my opinion it doesn't bridge the gap of understanding.

Answer 9

It'll be much easier if you don't use html elements that aren't designed to do this job. Tables are used for presenting data, not to hold layout.

If you really need to use tables you'll have to hide and show rows with media queries, which is a pretty bad practice.

If you decide to go with divs, you can float them setting different width in media queries depends on screen size.