About design and nearby

Responsive Tables

Posted: April 16th, 2015 | Author: | Filed under: Development, Tips and Tricks | Tags: , , , | No Comments »

As for my mind, tables are not to be used for layout. I do use tables are for lists of data. And at the age of responsive design they have to support responsibility.

Solution #1:
For the last time I work a lot with Bootstrap. There are a lot of pre-ready solutions, which help to save my time. Bootstrap framework proposes it’s own variant of responsive tables – you should wrap ‘table’ into ‘div’ element with .table-responsive class:

  1. <div class='table-responsive'>
  2.   <table class='table'>
  3.     …
  4.   </table>
  5. </div>

Horizontal scroll appears at the bottom of the table on small devices.
You can find an alive example as Variant 1.

Solution #2:
Another clever solution was proposed by David Bushell. His tables change orientation on small screens and a horizontal scroll is used to view more data. You can find an alive example as Variant 2.. The trick is to use display:inline-block; on the table rows and white-space:nowrap; on the table body.

I have had an issue in case of big number of signs at the cell, in other words, in case of long title – for smaller screen sizes I got an empty space at the right hand side of the table. My improvement was to add

  1. #flip-scroll td {overflow: hidden; }
  2. #flip-scroll tbody tr {width: 100%;}

Another bug I found appeared at IE9: the property ‘display:block;’ has no effect. The table renders exactly as if I don’t set that property. The main problem is that the cells don’t break; they all render on one line. My solution is to be back to usual look & feel of table for IE9 – as it is at older browsers. Also I have to rewrite styles for borders (please pay attention, I work with the Bootstrap table class=’table-bordered’). I added conditional stylesheet for IE9 only:

  1. <!–[if IE 9]>
  2. <link href="./index_files/ie9.css" rel="stylesheet">
  3. <![endif]–>
  1.  @media only screen and (max-width: 800px) {
  2.  #flip-scroll thead {float:none; }
  3.  #flip-scroll th {text-align:left; }
  5.  #flip-scroll th {border: 1px solid #ddd;}
  6.  #flip-scroll td {border-left:1px solid #ddd; border-bottom:1px solid #ddd;}
  7.  #flip-scroll tbody tr {border-left: 1px solid #ddd;}
  8.  #flip-scroll th:last-child,
  9.  #flip-scroll td:last-child {border-bottom: 1px solid #ddd; }
  10.  #flip-scroll .table-bordered  {border-bottom:0px solid #ddd; }
  11. }

That’s it for now!

Check standalone example: Responsive Tables >>

Related post:
You could be interested to read about jqGrid: How to Make it Responsive (with Twitter Bootstrap) also.

Share Button

Check Related Posts:

Leave a Reply

  • two × = 14

Looking for a Freelance UX & UI designer for your project? I’m ready to jump onboard!

Let's discuss your project now