Responsive Tables

The Hillside Bakery publishes a weekly baking schedule: one row for each bread and one column for each day of the week. On a laptop the table fits easily. On a phone it does not. The reader has to scroll the whole page sideways to see Sunday, and the heading and the text move out of view as well. A table that stays readable on any screen width is called a responsive table, and this lesson shows the usual way to make one.

Why a wide table breaks a phone layout

Here is the schedule, with eight columns:

<table>
  <caption>Loaves baked each day</caption>
  <thead>