This is a page demonstrating the problems with displaying tabular data on a responsive website and what to do about it.
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 |
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 |
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 |