📖 Complete Guide Available: This technique is covered in our comprehensive CSS Layout and Responsive Design Guide with additional responsive patterns and modern approaches.
Make HTML tables responsive by converting them to a stacked layout on mobile devices. This technique transforms table rows into card-like layouts that are much easier to read on small screens.
Quick Navigation:
- Basic Implementation - Get started fast
- Advanced Patterns - Complex scenarios
- Complete CSS Guide - All layout techniques
The HTML Structure
Add data-label
attributes to your table cells:
<table>
<thead>
<tr>
<th>Movie</th>
<th>Year</th>
<th>Rating</th>
<th>Director</th>
</tr>
</thead>
<tbody>
<tr>
<td data-label="Movie">The Shawshank Redemption</td>
<td data-label="Year">1994</td>
<td data-label="Rating">9.3/10</td>
<td data-label="Director">Frank Darabont</td>
</tr>
<tr>
<td data-label="Movie">The Godfather</td>
<td data-label="Year">1972</td>
<td data-label="Rating">9.2/10</td>
<td data-label="Director">Francis Ford Coppola</td>
</tr>
</tbody>
</table>
The CSS Solution
/* Default table styles */
table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}
th,
td {
padding: 0.75rem;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f8f9fa;
font-weight: 600;
}
/* Mobile responsive styles */
@media (max-width: 768px) {
table,
thead,
tbody,
th,
td,
tr {
display: block;
}
thead tr {
position: absolute;
top: -9999px;
left: -9999px;
}
tr {
border: 1px solid #ccc;
margin-bottom: 1rem;
padding: 0.5rem;
border-radius: 8px;
background: #fff;
}
td {
border: none;
position: relative;
padding-left: 50%;
text-align: right;
}
td:before {
content: attr(data-label) ": ";
position: absolute;
left: 0.75rem;
width: 45%;
text-align: left;
font-weight: 600;
color: #555;
}
}
Alternative: Horizontal Scroll Approach
For tables with many columns, consider horizontal scrolling:
.table-container {
overflow-x: auto;
margin: 1rem 0;
}
table {
min-width: 600px;
width: 100%;
}
@media (max-width: 768px) {
.table-container {
border: 1px solid #ddd;
border-radius: 8px;
}
table {
margin: 0;
}
}
Advanced Responsive Table Patterns
Comparison Tables
For feature comparison tables, you might want to keep headers visible:
@media (max-width: 768px) {
.comparison-table th:first-child,
.comparison-table td:first-child {
position: sticky;
left: 0;
background: #f8f9fa;
z-index: 1;
}
}
Priority Columns
Hide less important columns on smaller screens:
@media (max-width: 768px) {
.hide-mobile {
display: none;
}
}
How It Works
- Desktop: Normal table layout with headers and columns
- Mobile:
- Headers are hidden using
position: absolute
with negative positioning - Table elements become
display: block
to stack vertically - Each row becomes a card with rounded corners
- Cell labels appear on the left using the
data-label
attribute - Cell values align to the right
- Headers are hidden using
The data-label
attribute content is displayed using CSS attr()
function in the ::before
pseudo-element, creating inline labels for each piece of data.
Performance Considerations
- Minimize reflows: The card layout reduces horizontal scrolling
- Touch-friendly: Larger touch targets on mobile
- Readability: Better content hierarchy on small screens
Best Practices
- Semantic HTML: Always use proper table markup (
<table>
,<thead>
,<tbody>
) - Data attributes: Include meaningful
data-label
attributes for all cells - Testing: Test with real content and various screen sizes
- Accessibility: Ensure screen readers can navigate the transformed layout
Related CSS Techniques
This approach maintains semantic HTML structure while providing an optimal mobile experience.
Combine responsive tables with other CSS techniques:
- Complete CSS Layout Guide for comprehensive responsive design
- CSS media queries for device targeting
- Equal height columns for consistent layouts
- CSS centering techniques for alignment
- Disable text highlighting for better mobile UX