Download the Free Plugin to Make WordPress Tables Responsive with Horizontal Scroll
Instead of manually adding custom code to make your tables scrollable on mobile, simply install the Responsive Horizontal Table Scroll plugin.
It not only makes all your tables scrollable — but also adds a smart arrow indicator that improves mobile UX by gently guiding users to scroll.
✅ Verified & Safe – Download directly from WordPress.org Repository
🔧 No setup, no coding. Just activate and done!
This plugin:
– Makes all elements horizontally scrollable on smaller screens
– Automatically wraps tables without needing shortcodes or settings
– Adds a subtle arrow indicator to guide users on mobile (better UX)
– Works out of the box — no configuration required
– Lightweight: pure vanilla JavaScript and CSS (no jQuery or dependencies)
– Built using clean native WordPress practices
If you prefer not to install the plugin, you can manually follow the steps below to make your WordPress tables horizontally scrollable. However, please note that the arrow indicator feature is only available in the plugin version.
Step 1: Add This CSS
Paste the following CSS into your theme’s style.css, or in Appearance → Customize → Additional CSS
.table-scroll {
overflow-x: auto;
-webkit-overflow-scrolling: touch;
width: 100%;
margin-bottom: 1em;
}
.table-scroll table {
width: max-content;
min-width: 100%;
border-collapse: collapse;
}
This makes the container horizontally scrollable and lets the table keep its natural width without breaking layout.
Step 2: Automatically Wrap All Tables with JavaScript
To avoid manually adding <div class="table-scroll"> around every table, just use this JS snippet:
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("table").forEach(table => {
if (!table.parentElement.classList.contains("table-scroll")) {
const wrapper = document.createElement("div");
wrapper.className = "table-scroll";
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
}
});
});
</script>
You can add it inside your theme’s footer.php right before the closing </body>, or inject it with a code snippet plugin or Elementor’s Custom Code panel.
If you don’t have access to footer.php or you’re not using Elementor
In many WordPress themes, you can directly place JavaScript code in the footer.php file or via Elementor Pro’s Custom Code feature.
However, if you don’t have access to those options (e.g. using a free theme or free Elementor), you can safely load the script by adding the following code to your theme’s functions.php file (preferably a child theme):
// Add custom table wrapper script to frontend
function custom_wrap_tables_script() {
?>
<script>
document.addEventListener("DOMContentLoaded", function () {
document.querySelectorAll("table").forEach(table => {
if (!table.parentElement.classList.contains("table-scroll")) {
const wrapper = document.createElement("div");
wrapper.className = "table-scroll";
table.parentNode.insertBefore(wrapper, table);
wrapper.appendChild(table);
}
});
});
</script>
<?php
}
add_action('wp_footer', 'custom_wrap_tables_script');
Bonus: Don’t Break Vertical Scroll
Unlike some
display: blocktricks on<table>, this method preserves vertical scroll behavior and works across all modern browsers.
