# Stack Tables Into Labeled Cards on Phones

> On small screens, turns each row of the tables in your content into a card where every value is shown with its column heading, so wide tables can be read without sideways scrolling.

- Type: HTML
- Runs: Site-wide footer
- Category: [Accessibility](https://wpide.com/library/category/accessibility/)
- Tags: tables, mobile, responsive
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/a11y-stack-tables-on-phones/

## Code

```html
<style>
@media (max-width: 600px) {
    table.wpide-stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
    table.wpide-stack, table.wpide-stack tbody, table.wpide-stack tr, table.wpide-stack td, table.wpide-stack th[scope="row"] { display: block; width: 100%; }
    table.wpide-stack tr { margin: 0 0 1em; border: 1px solid #ccc; border-radius: 6px; padding: .5em; }
    table.wpide-stack td { border: 0; padding: .25em 0; }
    table.wpide-stack td[data-label]::before { content: attr(data-label) ": "; font-weight: 700; }
}
</style>
<script>
(function () {
    document.querySelectorAll('.entry-content table, .wp-block-post-content table').forEach(function (table) {
        var headRow = table.tHead ? table.tHead.rows[0] : null;
        var bodyRows = table.tBodies.length ? Array.prototype.slice.call(table.tBodies[0].rows) : [];
        if (!headRow && bodyRows.length && bodyRows[0].querySelectorAll('th').length === bodyRows[0].cells.length) {
            headRow = bodyRows.shift();
            headRow.classList.add('wpide-stack-head');
        }
        if (!headRow) { return; }
        var labels = Array.prototype.map.call(headRow.cells, function (c) { return c.textContent.trim(); });
        bodyRows.forEach(function (row) {
            Array.prototype.forEach.call(row.cells, function (cell, i) {
                if (labels[i] && !cell.hasAttribute('data-label')) { cell.setAttribute('data-label', labels[i]); }
            });
        });
        table.classList.add('wpide-stack');
    });
})();
</script>
```

## Notes

Only tables with a header row are changed; the table keeps its real structure for screen readers.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Stack Tables Into Labeled Cards on Phones" in its snippet library and add it in one click; or create a new HTML snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/