Scrollable Tables on Mobile
Lets wide tables in your content scroll sideways on small screens instead of breaking the layout or overflowing the page.
Opens WPIDE on
Code
.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 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.