14Tables and Footnotes


Tables, responsive elements

Well this is easy — tables and all the text within them is already responsive by virtue of all the things we’ve discussed previously.

The only thing left to do is make the standard and dense tables wider when the screen reaches a certain width (incidental tables and footnote tables do not do this, they remain narrower than the body text at all screen widths).

tables responsive elements
@media all and (max-width:760px){ .table-clean  { width: 100%; margin: 0; } }
@media all and (max-width:760px){ .table-dense  { width: 100%; margin: 0; } }
Code 14.11   Responsive elements for tables

When the screen is 760 pixels wide or less, the table width is set to 100% and the margins to zero.

And that’s it.

End flourish image