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.
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 1 | col 2 |
|---|---|
| row 1 | row 1 |
| col 1 | col 2 |
|---|---|
| row 2 | row 2 |
| col 1 | col 2 |
|---|---|
| row 3 | row 3 |
| col 1 | col 2 |
|---|---|
| row 4 | row 4 |
| col 1 | col 2 |
|---|---|
| row 5 | row 5 |
| col 1 | col 2 |
|---|---|
| row 6 | row 6 |
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).
getBoundingClientRect().top, resulting in headers not appearing or disappearing where they should. Because of that I use a 5px safety margin in the script. If you use very large font-size, padding, border or border-spacing values maybe the safety margin should be increased.published: Nov 25, 2015
last modified: Jan 26, 2017