Responsive Table Explorations

Some tips for handling data-heavy tables in html.

Fix the layout

Use a fixed table layout and stretched last column to keep everything nice and tight even with a big screen. (An empty column is useful if you're right-aligning cell values).

table{table-layout:fixed;} td:last-child{width:99%;}

Basic Fixed

Stick the Anchor Columns

You can achieve basic sticky columns with css only on modern browsers.

.sticky{position:sticky;} .sticky.left{left:0;} .sticky.right{right:0;} //stops page nav when swiping table on most browsers .tablewrap{overflow-behavior-x:contain;}

Sticky Columns

Sticky Header

We need some Javascript for this.

Sticky Headers