Responsive inline tables

In wide browser windows these tables should be lined up in a row, with each table displaying a header. In narrow browser windows the tables should be stacked in one or more columns, each column looking like a single table, while all headers are hidden except the ones in each column's top table.

Browser support

Should work in IE9 and other modern browsers 2015. If javascript is disabled the headers are always visible.


Resize the browser window to see how the tables and their headers adjust.

col 1col 2
row 1row 1
col 1col 2
row 2row 2
col 1col 2
row 3row 3
col 1col 2
row 4row 4
col 1col 2
row 5row 5
col 1col 2
row 6row 6

How it works

Since the tables are styled as display: inline-table they will reflow automatically in various browser windows widths.

To find out if a table is displayed at the top row (and its header should be visible) or stacked further down in a column (and its header should be hidden), the script uses getBoundingClientRect().top to find the distance from the tables to the top of the viewport. If the top distance of a table is larger than the first table's, it means the former table is stacked below another in a column. If the distance is the same as the first table's, it means they are lined up in a row at the top.


Place a group of inline tables in a DIV container with class="responsive_inline_tables". Multiple groups of inline tables can be used (each in its own DIV).

Bugs and limitations

published: Nov 25, 2015
last modified: Jan 26, 2017