# Make Content Tables Scroll on Small Screens

> Wraps tables in posts and pages in a scrollable container so wide tables no longer break the layout on phones.

- Type: PHP
- Runs: Frontend only
- Category: [Content](https://wpide.com/library/category/content/)
- Tags: tables, mobile, responsive
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/scrollable-tables-on-mobile/

## Code

```php
add_filter( 'the_content', function ( $content ) {
    if ( false === stripos( $content, '<table' ) || is_feed() ) {
        return $content;
    }

    $result = preg_replace_callback( '/(<figure[^>]*wp-block-table[^>]*>\s*)?(<table\b.*?<\/table>)/is', function ( $m ) {
        if ( ! empty( $m[1] ) ) {
            return $m[0];
        }

        return '<div class="wpide-table-scroll" style="overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;">' . $m[2] . '</div>';
    }, $content );

    return null === $result ? $content : $result;
}, 20 );
```

## Notes

Tables that are already inside a Table block wrapper are left as they are.

## How to use it

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