Table Sizes
Make a table fill its container without giving the page a fixed pixel width.
Understand the topic
Tables can use automatic sizing based on their content or CSS widths constrained by their container. A percentage width follows the available space. Wide datasets may need horizontal scrolling on small screens rather than squeezed text. Keep the table semantics and make the scroll region usable with a keyboard when it can overflow.
Worked example
<div tabindex="0" role="region" aria-label="Workshop places" style="overflow-x: auto;">
<table style="width: 100%; min-width: 20rem;"><caption>Workshop places</caption><tr><th scope="col">Class</th><th scope="col">Places</th></tr><tr><td>HTML</td><td>12</td></tr></table>
</div>The wrapper can scroll if the table exceeds its available width. A minimum width is useful only when the data really requires it.
Practice
Make a table fill its container without giving the page a fixed pixel width.
Show a suggested answer
table { width: 100%; }
.table-wrapper { overflow-x: auto; }Common mistake
A fixed wide table can force the entire mobile page to scroll sideways. Constrain overflow around the table.