14Tables and Footnotes

Well this is easy — ta­bles and all the text within them is al­ready re­spon­sive by virtue of all the things we’ve dis­cussed pre­vi­ously.

The only thing left to do is make the stan­dard and dense ta­bles wider when the screen reaches a cer­tain width (in­ci­den­tal ta­bles and foot­note ta­bles do not do this, they re­main nar­rower than the body text at all screen widths).

@media all and (max-width:760px){ .table-clean  { width: 100%; margin: 0; } }
@media all and (max-width:760px){ .table-dense  { width: 100%; margin: 0; } }

When the screen is 760 pix­els wide or less, the table width is set to 100% and the mar­gins to zero.

And that’s it.