This is a page demonstrating the problems with displaying tabular data on a responsive website and what to do about it.

Non responsive table wider that the page

  Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10 Heading 11 Heading 12 Heading 13 Heading 14
Row 1 Data 1 Data 2 Data 3 Data 4 Data 5                
Row 2 Data Data Data Data Data                
Row 3 Data Data Data Data Data                

Table made responsive with css

This is a bit tricky in that the css needs to be pre-defined in order for the proper labels to show. To do this on a regular basis, the data in the tables needs to be in the exact same order every time. if not you will have to define different style every time.

Another limitation is that the number of columns needs to fit onto the page or it will still be cut off.

  Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10 Heading 11 Heading 12 Heading 13 Heading 14
Row 1 Data 1 Data 2 Data 3 Data 4 Data 5                
Row 2 Data Data Data Data Data                
Row 3 Data Data Data Data Data                

 

Exactly the same table but now “responsive” using jquery to add sliders to the table

This method is still not pleasing to the eye and needs horisontal scrolling but in my opinion an acceptable compromise to have wide tables display as expected on limited width viewports.

  Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10 Heading 11 Heading 12 Heading 13 Heading 14
Row 1 Data 1 Data 2 Data 3 Data 4 Data 5                
Row 2 Data Data Data Data Data                
Row 3 Data Data Data Data Data                

 

let's get social... ➦