Responsive Tables
Tables are inherently fixed-width and overflow on small screens. Wrap them in a scrollable container as a quick fix, or restructure as cards on mobile.
HTML
Intermediate
5 min read
Responsive HTML Tables
Example
/* Quick fix: horizontal scroll */
.table-wrapper {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
/* Card layout on mobile */
@media (max-width: 600px) {
table, thead, tbody, tr, th, td { display: block; }
thead tr { display: none; }
td::before { content: attr(data-label); font-weight: bold; }
} Pro Tip
Add data-label attributes to table cells and use CSS content: attr(data-label) for card-style mobile tables.