CSS Responsive Tables

📖 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

1. Desktop: Normal table layout with headers and columns
2. 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

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

1. Semantic HTML: Always use proper table markup (<table>, <thead>, <tbody>)
2. Data attributes: Include meaningful data-label attributes for all cells
3. Testing: Test with real content and various screen sizes
4. 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