A table with six columns will not fit on a 360 pixel screen.
Direct answer
The simplest responsive table is to wrap it in a container with overflow-x: auto so it scrolls sideways. For a more phone-friendly view, restyle each row as a stacked block with labels from data-label attributes.
Scrolling table
<div class="table-wrap">
<table>...</table>
</div>
.table-wrap {
overflow-x: auto;
}
table {
border-collapse: collapse;
min-width: 600px;
}
Stacked rows
@media (max-width: 600px) {
table, thead, tbody, tr, td { display: block; }
thead { position: absolute; left: -9999px; }
td::before {
content: attr(data-label);
font-weight: bold;
display: block;
}
}
<td data-label="Price">12.00</td>
Tips
- Keep key columns visible.
- Use
th scopefor accessibility. - Do not hide important data.
Where Teyro fits
Teyro's Responsive Web Design with CSS course turns this into short lessons you can play in a few minutes a day. It has 100 lessons, and you can start free.
The bottom line
Scroll for dense data, stack for short rows.
