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.
Opens WPIDE on
Code
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 add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.