Responsive Tables

Two of the most difficult things to get right in a responsive design are images and tables. By their very nature, the tend to occupy a certain amount of space, and it is often difficult to work out what to do if the screen is to small to accommodate the whole figure.

Another article deals with the <picture> element, which is a new way of handling images responsively. This article will look at how we might be able to accommodate a table

<style type="text/css"> table { font-family: sans-serif; font-size: 87.5% !important; } table#data>thead>tr { background-color: red; } </style>

<table id="data"> <caption>How to brew Tea</caption> <thead> <tr><th>Tea</th><th>Temp</th><th>Time</th><th>Notes</th></tr> </thead> <tbody> <tr><td>Green</td><td>80°-85°</td><td>2-3 min</td><td>Unoxidised</td></tr> <tr><td>Oolong</td><td>85°-95°</td><td>3-7 min</td><td>Slightly Oxidised</td></tr> <tr><td>Black</td><td>96°-100°</td><td>3-5 min</td><td>Oxidised<br>“Normal Tea”</td></tr> <tr><td>Tisanes</td><td>96°-100°</td><td>5-8 min</td><td>Not real tea</td></tr> </tbody> </table>