Home /Responsive /Quick and Dirty Responsive Tables using overflow /

Quick and Dirty Responsive Tables using overflow

2:17 am, April 23, 2017

Tables and Smaller devices can be a bit tricky. I have seen a few table solutions that stack the table content on smaller screens.

I prefer this method, if i have to apply it to a bunch of tables and dont want to spend a ton of time fixing them all.

The Style

Set this to whatever screen size you want the tables to start scrolling. I used 800px as its the fixed width of this table, but you can just pick the size based on how your table content looks as the screen gets smaller. You could also apply this style all the time, if you want the table overflow to scroll as soon as the screen gets too small. But then you will have a scroll bar visible all the time.


Example table

Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell
Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell Table Cell