# Scrollable Tables on Mobile

> Lets wide tables in your content scroll sideways on small screens instead of breaking the layout or overflowing the page.

- Type: CSS
- Runs: Site-wide header
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: tables, mobile, responsive, css
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-responsive-tables/

## Code

```css
.entry-content table,
.wp-block-post-content table:not(.wp-block-table table) {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.entry-content table th,
.entry-content table td {
    white-space: nowrap;
}

@media (min-width: 782px) {
    .entry-content table th,
    .entry-content table td {
        white-space: normal;
    }
}
```

## Notes

The Table block already scrolls in most block themes; this mainly helps classic themes and tables pasted from other sources.

## How to use it

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