--- title: "How to Make Data Tables Mobile Responsive in WordPress? (2 Methods)" url: https://nexterwp.com/docs/make-data-tables-mobile-responsive-in-wordpress/ date: 2023-04-11 modified: 2026-09-14 lang: en author: "Aditya Sharma" description: "A six column table and a phone screen do not get along, and squashing the columns makes the table unreadable. The Data Table block offers two ways out: let the..." image: https://nexterwp.com/wp-content/uploads/2024/05/make-data-tables-mobile-responsive-in-wordpress-1024x519.jpg word_count: 556 --- # How to Make Data Tables Mobile Responsive in WordPress? (2 Methods) ## Key Takeaways - Data Table block ofrece dos opciones de responsive: Swipe mantiene las columnas y permite desplazamiento horizontal dentro de su propio contenedor, mientras One by One apila cada fila en un bloque vertical. - Nexter Blocks Pro activa One by One; en la versión gratuita la tabla vuelve a desplazarse lateralmente, aunque la opción aparezca en el plugin. - Swipe funciona en una tabla de 519 píxeles dentro de una pantalla de 390 píxeles sin mover toda la página, pero One by One no repite los encabezados de columna y conviene más para tablas que se leen fila por fila. A six column table and a phone screen do not get along, and squashing the columns makes the table unreadable. The Data Table block offers two ways out: let the table scroll sideways, or stack each row into its own block. *For every Data Table setting in one place, see the [Data Table block guide](https://nexterwp.com/docs/add-data-table-in-wordpress/).* [LIVE BLOCK LINK](https://nexterwp.com/nexter-blocks/blocks/wordpress-data-table/) ## Before You Start - **Edition:** Free — works in Nexter Blocks (free) and with Nexter Blocks Pro.- **Block to enable:** Data Table, switched on under **Nexter > Blocks** in your WordPress dashboard.- **A table wide enough to be a problem:** the difference only shows once the columns no longer fit. ## Steps - Add the **Data Table** block to your page and click **Design from Scratch**. - In the **Table** panel, leave **Type** on **Standard**. ![The Table panel with Type set to Standard](https://nexterwp.com/wp-content/uploads/2026/09/data-table-type.webp) - Open **Table Header**. Each item's **Action** is either **Start New Row** or **Cell Content** — start a row, then add one **Cell Content** item per column and type its heading. ![A Table Header item with the Action dropdown](https://nexterwp.com/wp-content/uploads/2026/09/data-table-header.webp) - Open **Table Body** and do the same: a **Start New Row** item, then one **Cell Content** item per column with its **Text**. ![A Table Body cell item with the Text field](https://nexterwp.com/wp-content/uploads/2026/09/data-table-body.webp) - Open **Extra Settings** and set **Responsive Options** to **Swipe** or **One by One**. ![The Responsive Options setting with Swipe and One by One](https://nexterwp.com/wp-content/uploads/2026/09/data-table-responsive.webp) - Publish the page and open it on a phone, or narrow your browser window to check. ## The Two Methods | Method | What the visitor sees | Best for | | ------ | --------------------- | -------- | | Swipe | The table keeps its columns and scrolls sideways inside its own area. The rest of the page does not move. | Tables where comparing across columns matters | | One by One | Each row is stacked as its own block, one value under another, so there is no sideways scrolling at all. | Tables read one row at a time | ![A wide table on a phone, scrolling sideways within its own area](https://nexterwp.com/wp-content/uploads/2026/09/data-table-fe-responsive-swipe.webp) ![The same table with One by One, each row stacked as a block of values](https://nexterwp.com/wp-content/uploads/2026/09/data-table-fe-responsive-onebyone.webp) ## How It Behaves - **Swipe** is the default. The table sits in a wrapper that scrolls horizontally, so a 519 pixel table fits inside a 390 pixel phone screen without the page itself scrolling sideways.- **One by One** makes the table fit the screen width and stacks each row's cells vertically.- On desktop both settings look identical — the difference only appears once the table is wider than the screen.- Sideways scrolling works even in the free plugin, because it comes from the table's own wrapper. **One by One** is the part that needs Pro. ## Limitations - **One by One needs Nexter Blocks Pro.** The setting appears in the free plugin but the table keeps scrolling sideways instead.- **One by One does not repeat the column headings**, so each stacked value appears on its own with nothing naming its column. It suits tables whose values speak for themselves, and it is a poor fit for a table of bare numbers.- Swipe hides part of the table until the visitor scrolls, so put the column that identifies the row first.- Neither option reduces how much loads — the whole table is still on the page. ## Troubleshooting ### The whole page scrolls sideways on a phone Something else on the page is too wide. The table's own wrapper scrolls by itself, so check the blocks around it. ### One by One looks the same as Swipe Nexter Blocks Pro is not active. In the free plugin the table falls back to scrolling sideways. ### Stacked values are hard to follow That is the trade-off — the headings are not repeated. Either switch to **Swipe**, or make the first cell of each row a label that identifies it. ## Related Docs - [Enable column sorting](https://nexterwp.com/docs/enable-sorting-in-wordpress-tables/)- [Limit how many rows show at once](https://nexterwp.com/docs/limit-number-of-rows-in-a-wordpress-table/)- [Data Table block: all settings](https://nexterwp.com/docs/add-data-table-in-wordpress/) ## Frequently Asked Questions **Q: Why does a data table break on mobile in WordPress?** A: A six column table and a phone screen do not get along, so squeezing every column into the viewport makes the table unreadable. Nexter Blocks solves that by giving the Data Table block two mobile behaviors: sideways scrolling or stacked rows. The key trade-off is readability versus compactness, because the whole table still exists on the page either way. **Q: What is the best way to make a WordPress data table readable on a phone?** A: The best choice depends on how people use the table. Swipe works better when visitors need to compare values across columns, because the table keeps its structure and scrolls inside its own wrapper. One by One works better when people read each row as a separate record, because it stacks the cells vertically and removes sideways scrolling. **Q: Why is my whole WordPress page scrolling sideways on mobile instead of just the table?** A: That usually means something else on the page is wider than the screen. The Data Table block scrolls inside its own wrapper, so the page itself should not move sideways just because of the table. In Nexter Blocks, check the blocks around it for overflow problems, since the table can only contain its own width. **Q: Why does One by One look the same as Swipe in my table?** A: One by One needs Nexter Blocks Pro. In the free plugin, that setting appears but the table falls back to sideways scrolling, so it behaves like Swipe. That is why both modes can look identical until Pro is active and the table is wider than the screen. **Q: Should I use Swipe or One by One for a responsive data table?** A: Swipe is better for comparison tables because it keeps all columns in place and lets visitors move sideways inside the table area. One by One is better for tables read one row at a time, since each row becomes a stacked block with no horizontal scrolling. A practical gotcha: Swipe hides part of the table until someone scrolls, so put the identifying column first. **Q: What do I need before using responsive data tables in Nexter Blocks?** A: The Data Table block must be switched on under Nexter > Blocks in your WordPress dashboard, and it works in Nexter Blocks free as well as Nexter Blocks Pro. The responsive behavior only matters once your table is wide enough to overflow a phone screen, so a narrow table may look unchanged on desktop and mobile.