A table with five columns rarely fits on a phone screen. Text gets squeezed or the page starts to scroll sideways.
The Table widget from The Plus Addons for Elementor has two mobile layouts in its Mobile Responsive option: a table you swipe sideways, or rows stacked one under the other.
To check the complete feature overview documentation of The Plus Addons for Elementor Table widget, click here.
Requirement – This widget is a part of The Plus Addons for Elementor, make sure it’s installed & activated to enjoy all its powers.
Before You Start
- Edition: Free — this works in the free plugin; Pro is not needed.
- Widget to enable: Table, switched on under The Plus Addons > Widgets.
How to Choose a Mobile Layout
- Add the Table widget to your page and fill in your table.
- Open Extra Settings in the Content tab.
- In Mobile Responsive, choose Swipe Responsive (the default) or One by One Responsive.
- Publish the page and check it on a phone, or in your browser’s device view below 768 px wide.
Swipe Responsive
The table keeps its columns. On a narrow screen it scrolls sideways inside its own box, so the rest of the page does not move. In our 390 px test, a 494 px wide table scrolled inside a 310 px box.
One by One Responsive
Below 768 px, the header row is hidden and each row becomes a small block. Every cell shows its column name next to the value, for example “Price 29”. From 768 px up the normal table is shown.
Style the column names in Style > Header Mobile Responsive Style, which appears when One by One Responsive is selected.
Limitations
- One by One hides the header row, so the sort arrows of Table Sortable are not available on phones. The search box still works.
- One by One labels need the Custom source. With CSV File, Plus Form or SQL Query as the Content Table, the rows are stacked without their column names.
- The switch point is fixed at 767 px and cannot be changed in the widget.
Troubleshooting
The stacked layout shows on my desktop preview
The layout switches at 767 px. Make the browser wider than 768 px or check the desktop view in Elementor.
My stacked rows have no column names
Check the Content Table source. Only tables built with the Custom source repeat the header text in each cell.
