Stacked Rows on Mobile Table Template

Avoid horizontal scrolling on mobile with this responsive table that cleverly stacks rows into a vertical card layout on small screens.

This pattern provides a significantly better user experience on phones for data-rich tables, presenting information in an easy-to-read, organized format.

A table that displays normally on desktop but stacks into a vertical list on mobile.

Get Source Code → Preview →

About this Responsive Table

On a desktop or large screen, this template appears as a standard, conventional table. However, when viewed on a smaller screen (like a mobile phone), a CSS media query triggers a transformation. The table's rows convert into individual block-level "cards," and the column headers are used as labels for each piece of data. This is achieved using HTML data attributes and CSS pseudo-elements, removing the need for horizontal scrolling.

Key Features:

Superior Mobile Experience: Eliminates awkward horizontal scrolling for tables with multiple columns.
Card-like Mobile View: Data is presented vertically in a clean, scannable format on small screens.
CSS-Only Solution: This responsive behavior is achieved entirely with HTML and CSS, requiring no JavaScript.
Semantic Structure: The core markup is a semantic table, ensuring it's still logical and accessible on larger screens.

Ideal Use Cases:

Contact or user lists.
Project status trackers.
Order history summaries.
Any table where each row represents a distinct "item" that can be viewed as a card.

Dependencies:

None. This template uses only pure HTML and CSS.

Accessibility & Implementation Notes:

To make this technique work, each td element in the HTML must have a data-label attribute that matches its corresponding column header. This label is then displayed using CSS on mobile.

Important: Modifying a table's display properties (e.g., to display: block;) can alter how screen readers interpret it on mobile. While visually superior, a screen reader may no longer announce the content as a data table with navigable rows and columns. This is a common trade-off with this design pattern.

Code

Here's the full code for the stacked table template:

.table-stacked thead {
    background-color: #2c3e50;
    color: #ffffff;
}

/* Visually hide thead on mobile, but keep for screen readers */
@media screen and (max-width: 768px) {
    .table-stacked thead {
        border: none;
        clip: rect(0 0 0 0);
        height: 1px;
        margin: -1px;
        overflow: hidden;
        padding: 0;
        position: absolute;
        width: 1px;
    }
}

.table-stacked th,
.table-stacked td {
    padding: 12px 15px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

/* START: Responsive stacking styles */
@media screen and (max-width: 768px) {
    .table-stacked,
    .table-stacked tbody,
    .table-stacked tr,
    .table-stacked td {
        display: block;
    }

.table-stacked tr {
        border: 1px solid #ccc;
        margin-bottom: 15px;
        border-radius: 5px;
    }

.table-stacked td {
        border-bottom: 1px solid #eee;
        position: relative;
        padding-left: 50%;
        text-align: right;
        min-height: 35px; /* Ensures a minimum height for better touch targets */
    }

/* This is where the magic happens */
    .table-stacked td::before {
        /* Use the content from the data-label attribute */
        content: attr(data-label);

position: absolute;
        left: 10px;
        width: calc(50% - 20px);
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        color: #2c3e50;
    }
}
/* END: Responsive stacking styles */

</style>

<table class="table-stacked">
    <thead>
        <tr>
            <th>Project Name</th>
            <th>Project Lead</th>
            <th>Due Date</th>
            <th>Status</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-label="Project Name">Website Redesign</td>
            <td data-label="Project Lead">Alice Johnson</td>
            <td data-label="Due Date">2024-10-15</td>
            <td data-label="Status">In Progress</td>
        </tr>
        <tr>
            <td data-label="Project Name">API Integration</td>
            <td data-label="Project Lead">Bob Williams</td>
            <td data-label="Due Date">2024-09-30</td>
            <td data-label="Status">Completed</td>
        </tr>
        <tr>
            <td data-label="Project Name">Q4 Marketing Campaign</td>
            <td data-label="Project Lead">Charlie Brown</td>
            <td data-label="Due Date">2024-11-01</td>
            <td data-label="Status">Not Started</td>
        </tr>
        <tr>
            <td data-label="Project Name">Mobile App Launch</td>
            <td data-label="Project Lead">Diana Prince</td>
            <td data-label="Due Date">2024-12-20</td>
            <td data-label="Status">Blocked</td>
        </tr>
    </tbody>
</table>

View Output