CSS Responsive Table
Wide tables break small layouts, so wrap them in a scrolling container to keep the page usable on phones.
Tables with many columns are wider than a phone screen. Left alone they either overflow the page or squash their columns until the text is unreadable. The simplest fix is to let the table scroll sideways inside its own box.
The scrolling wrapper
Put the table inside a container element, then set overflow-x: auto on that container. A horizontal scrollbar appears only when the table is wider than the space available. See CSS Overflow for how the overflow values behave.
HTML structure
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="table-wrap">
<table>
<!-- rows and cells -->
</table>
</div>
</body>
</html>The wrapper styles
<!DOCTYPE html>
<html>
<head>
<style>
.table-wrap {
overflow-x: auto;
}
.table-wrap table {
min-width: 600px;
border-collapse: collapse;
}
</style>
</head>
<body>
<div class="table-wrap">
<table>
<tr>
<th>Name</th>
<th>Department</th>
<th>Score</th>
</tr>
<tr>
<td>Ava</td>
<td>Design</td>
<td>92</td>
</tr>
</table>
</div>
</body>
</html>Note: Give the table a min-width so it keeps its intended layout and actually triggers scrolling, instead of shrinking to fit the narrow wrapper.
Other approaches
- Horizontal scroll: the least effort and keeps the familiar table shape.
- Hiding less important columns on small screens with a media query.
- Reflowing each row into a stacked card layout for very narrow screens.
Note: Scrolling is the safest default because no data is hidden. Reserve the more advanced reflow patterns for cases where scrolling feels awkward.
Exercise: CSS Tables
Which property removes the double-line effect between adjacent table cell borders?
