How to Make a Responsive Table in WordPress for All Devices

Introduction

If you have ever visited a website on your phone and found a table that was too wide to read, too small to tap, or just broken and overflowing off the screen – you know exactly how frustrating that experience can be. Tables are one of the most powerful ways to present data, comparisons, and structured information on a website. But without responsive design, they can turn into a nightmare on mobile devices.

WordPress is the world’s most popular content management system, powering over 43% of all websites on the internet. It gives you tremendous flexibility in how you build and display content. However, WordPress does not automatically make your tables mobile-friendly. If you insert a table using the default block editor and do nothing else, it may look great on a desktop but look completely broken on a smartphone.

This guide will walk you through everything you need to know about making responsive tables in WordPress – from understanding what responsive means, to using plugins, writing CSS, and using the Gutenberg block editor. Whether you are a complete beginner with no coding experience or someone who wants to go a little deeper with custom styling, this article has something for you.

By the end of this guide, you will be able to create beautiful, clean, and fully responsive tables that look great on any screen size – from a tiny mobile phone to a large desktop monitor.

What Is a Responsive Table?

Before we dive into the how, let us make sure we understand the what.

A responsive table is a table that automatically adjusts its layout, size, and appearance based on the screen size of the device it is being viewed on. The goal is to make the table readable and usable on all devices – whether that is a desktop, laptop, tablet, or smartphone.

Here is a simple way to think about it: Imagine you have a table with 5 columns and 10 rows. On a desktop with a wide screen, all 5 columns fit perfectly side by side. But on a phone with a narrow screen, those same 5 columns would either overflow beyond the screen edge, get squished so small that the text becomes unreadable, or break the layout of your entire page.

A responsive table solves this problem by doing one or more of the following things:

• Adding a horizontal scroll bar so users can swipe to see the rest of the table
• Stacking the columns vertically on small screens
• Hiding less important columns on mobile and showing them on desktop
• Resizing the font size and column widths proportionally based on screen width

The key principle behind responsive design is flexibility. A responsive table does not have a fixed, rigid width. Instead, it flows and adapts to fit whatever space is available.

Why Does This Matter?

Here are some very practical reasons why responsive tables matter for your WordPress site:

• More than 60% of all global web traffic now comes from mobile devices. If your tables do not work on mobile, you are creating a poor experience for the majority of your visitors.
• Google uses mobile-first indexing, which means it primarily looks at the mobile version of your website when deciding how to rank it in search results. A broken table on mobile can hurt your SEO.
• User experience directly affects bounce rate. If someone lands on your page and cannot read your table on their phone, they will leave immediately.
• Accessibility is also a concern. Responsive tables are generally easier to navigate using screen readers and assistive technologies.

In short, making your tables responsive is not optional in today’s world. It is a necessity.

The Default WordPress Table Block

WordPress comes with a built-in Table block in the Gutenberg editor (the default block editor that WordPress has used since version 5.0). This is the simplest way to create a table in WordPress without needing any additional plugins or code.

How to Insert a Table Using the Gutenberg Block Editor

Follow these simple steps to add a table to your WordPress post or page:

1. Log in to your WordPress dashboard.
2. Go to Posts or Pages and open the one you want to edit (or create a new one).
3. Click the + icon to add a new block.
4. In the search box that appears, type the word “Table” and select the Table block.
5. A dialog will ask you how many columns and rows you want. Enter your desired numbers and click Create Table.
6. Your table will appear in the editor. Click any cell to start typing in it.
7. Use the block settings panel on the right side to adjust styling options like fixed-width cells and table stripes.
8. When you are happy with your table, click Update or Publish to save.

Is the Default Table Block Responsive?

Here is an honest answer: the default Gutenberg table block is only partially responsive. It does not overflow off the screen in a catastrophic way, but it also does not give you a great mobile experience. The table will attempt to shrink to fit the screen, which often makes text very small and hard to read.

The default table block does not add horizontal scrolling, it does not stack columns vertically on mobile, and it does not hide any columns on smaller screens. So while it is better than nothing, it is not truly responsive by modern standards.

For a fully responsive table, you will need to use one of the methods described in the sections below.

Tip: If your table has only 2 or 3 columns and minimal text, the default block may be acceptable on mobile. But for tables with 4 or more columns or a lot of content, you will definitely want a better solution.

Method 1 – Using a Plugin (TablePress)

The easiest and most beginner-friendly method for creating responsive tables in WordPress is to use a plugin. There are several good options, but the most popular and well-established one is TablePress.

What Is TablePress?

TablePress is a free WordPress plugin with over 800,000 active installations. It is specifically designed to help you create, manage, and display tables on your WordPress site. It comes with a clean visual table editor, sorting and filtering features, and – most importantly for us – a built-in extension for making tables responsive.

Step-by-Step: Installing and Using TablePress

Step 1: Install the Plugin

9. Go to your WordPress dashboard.
10. Navigate to Plugins and then click Add New.
11. In the search box, type “TablePress”.
12. Find the TablePress plugin and click Install Now, then click Activate.

Step 2: Create a New Table

13. After activating, you will see a new TablePress item in your left sidebar. Click it.
14. Click Add New Table.
15. Give your table a name (like “Product Comparison” or “Pricing Table”).
16. Enter the number of rows and columns you need.
17. Click Add Table to create it.

Step 3: Add Your Content

You will now see the TablePress table editor. It looks similar to a spreadsheet. Click on any cell and start typing. You can:

• Type plain text or numbers
• Use basic HTML for links, bold text, or images within cells
• Use the Table Manipulation section to add or delete rows and columns
• Drag and drop rows and columns to reorder them

Step 4: Enable the Responsive Tables Extension

TablePress does not make tables responsive by default. To add responsive behavior, you need to install the free Responsive Tables extension for TablePress. Here is how:

18. Go to the TablePress screen and click on Extensions.
19. Find the Responsive Tables extension and download it.
20. Upload and activate the extension just like a regular plugin.
21. Once activated, go back to your table editor. You will see a new option to enable responsive behavior for that table.
22. Enable it and save the table.

Step 5: Embed the Table in Your Content

23. After saving your table, you will see a shortcode that looks something like this: [table id=1 /]
24. Copy this shortcode.
25. Go to the post or page where you want the table to appear.
26. Paste the shortcode into a Shortcode block (or just paste it directly in the classic editor).
27. Publish or update the page.

Your table will now appear on the front end of your site, fully styled and responsive.

Other Responsive Table Plugins Worth Knowing

TablePress is the most popular option, but it is not the only one. Here are a few other plugins that offer responsive table features:

Plugin Name	Key Features	Price
TablePress	Most popular, CSV import, extensions, sorting	Free (extensions may vary)
Ninja Tables	Drag-and-drop builder, WooCommerce data, charts	Free + Premium
wpDataTables	Excel/CSV import, charts, conditional formatting	Premium
Tablesome	Import from CSV, Google Sheets sync, filterable	Free + Pro
Ultimate Tables	Lightweight, simple, responsive out of box	Free

Method 2 – Making Tables Responsive with Custom CSS

If you want more control over how your table looks and behaves on different screen sizes, you can make your tables responsive using CSS (Cascading Style Sheets). This method requires a little bit of code, but do not worry – we will explain everything step by step in plain language.

CSS is the language that controls the visual appearance of web pages. You can use it to tell your table how to look on large screens and how to change its appearance on smaller screens.

The Horizontal Scroll Method

The simplest CSS technique to make a table responsive is to wrap it in a container and tell that container to scroll horizontally when the table is wider than the screen. This is a great option because it requires very little code and works for almost any table.

Step 1: Wrap Your Table in a Div

In WordPress, you can add HTML directly to your content using the Custom HTML block. Here is what the code looks like:

<div class=”table-responsive”>  [your table HTML here]</div>

This wraps your table inside a div element with the class name “table-responsive”.

Step 2: Add the CSS

Now go to your WordPress Customizer. Go to Appearance, then Customize, then Additional CSS. Add the following CSS code:

.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

Here is what this code does:

• overflow-x: auto tells the browser to add a horizontal scroll bar when the table is too wide to fit the screen.
• -webkit-overflow-scrolling: touch makes the scrolling smooth on iOS devices.

That is it for the basic version. With just these two lines of CSS, your tables will now scroll horizontally on small screens instead of breaking the layout.

The Mobile Stacking Method

The horizontal scroll method is simple and effective, but some designers prefer a more elegant solution where the table columns stack vertically on small screens. This gives a card-like appearance on mobile, which can be easier to read.

This technique requires a bit more CSS and uses something called media queries. A media query is a CSS rule that only applies when the screen is a certain width.

Here is an example of how this looks in CSS:

@media screen and (max-width: 600px) {

table, thead, tbody, th, td, tr { display: block; }

thead tr { display: none; }

}

This code tells the browser that on screens smaller than 600 pixels wide, all table elements should display as block elements (which means they stack vertically instead of appearing side by side). The table header row is hidden since the column labels are shown differently in this layout.

Note: The mobile stacking method is more complex to implement correctly, especially if you want column labels to still appear alongside each cell. For beginners, the horizontal scroll method is usually the better starting point.

Where to Add Your CSS in WordPress

There are two main ways to add custom CSS to WordPress:

28. Via the Customizer: Go to Appearance > Customize > Additional CSS. This is the easiest way for beginners and does not require editing any theme files.
29. Via a Child Theme: If you are comfortable with themes, you can add CSS to your child theme’s style.css file. This is the more permanent and professional approach.

Never edit the main theme’s files directly because your changes will be lost when the theme updates. Always use a child theme or the Additional CSS box in the Customizer.

Method 3 – Using the Advanced Table Block in Gutenberg

In addition to the default Table block, WordPress’s Gutenberg editor has a growing ecosystem of third-party block plugins that add more powerful table options. One great option is the Flexible Table Block, which gives you much more control over table responsiveness right inside the editor without needing to write any code.

What Is the Flexible Table Block?

The Flexible Table Block is a free WordPress plugin that adds a new, enhanced table block to your Gutenberg editor. It includes features like:

• Full control over column widths and row heights
• Responsive behavior options per breakpoint (desktop, tablet, mobile)
• Merged cells support
• Individual cell background colors
• Sticky header rows
• Caption support above and below the table

How to Use It

30. Go to Plugins > Add New and search for “Flexible Table Block”.
31. Install and activate the plugin.
32. In the Gutenberg editor, click the + button to add a new block.
33. Search for “Flexible Table” and select it.
34. Build your table using the visual editor.
35. On the right-hand settings panel, look for the Responsive settings section.
36. Choose how the table should behave on tablet and mobile: horizontal scroll, stacked layout, or custom breakpoint styles.

This is an excellent solution for people who want responsive tables without writing any code, and who want more customization options than the basic TablePress approach.

Method 4 – Responsive Tables with Page Builders

Many WordPress users build their sites using visual page builders like Elementor, Divi, or Beaver Builder. These tools allow you to design complex layouts by dragging and dropping elements onto the page. Most modern page builders include responsive table options.

Elementor

Elementor is the most popular WordPress page builder with over 10 million active installations. It comes with a Table widget in the Pro version that allows you to:

• Build and style tables visually
• Control how the table looks on desktop, tablet, and mobile separately
• Set responsive breakpoints for each device size
• Style fonts, colors, borders, and padding per cell type

In Elementor, you can click the device icon at the bottom of the editor to switch between desktop, tablet, and mobile views, and adjust your table settings for each view separately.

Divi Builder

Divi by Elegant Themes also has built-in responsive design tools. Any element – including tables created with the Text or Code module – can be controlled individually per device. Divi’s Visual Builder shows you exactly how your table will look on different screen sizes as you edit it.

Using a Pricing Table Widget

If your goal is to display pricing information in a table format (a very common use case for business websites), both Elementor and Divi have dedicated Pricing Table widgets. These are specifically designed to look great on mobile devices and usually handle responsiveness automatically.

Tip: If you are already using a page builder on your website, try to use its built-in table tools before installing additional plugins. Fewer plugins mean a faster website.

Best Practices for Responsive Tables in WordPress

Creating a responsive table is not just about the technical setup – it is also about making good design decisions. Here are some best practices to keep in mind when building tables for your WordPress site.

1. Keep Tables Simple

The fewer columns your table has, the easier it is to make responsive. Before building a complex 8-column table, ask yourself: Do I really need all of these columns? Can some information be combined? Sometimes a simpler 3 or 4 column table communicates the same information more clearly and is much easier to adapt for mobile screens.

2. Prioritize Columns

If you do need a table with many columns, think about which columns are most important. On mobile, you may want to show only the most critical columns (like name and price) and hide the less important ones (like SKU or internal ID). Some responsive table plugins and CSS techniques allow you to mark certain columns as hidden on mobile.

3. Use Short, Clear Column Headers

Long column headers cause problems on small screens. Try to use short, descriptive labels. Instead of “Total Number of Products Available”, use simply “Products” or “Count”. This small change can make a big difference on mobile.

4. Avoid Merging Cells When Possible

Merged cells (cells that span multiple columns or rows) can cause issues with responsive layouts. They add complexity and often break the stacking behavior of CSS-based responsive techniques. Use merged cells sparingly, and always test your table on mobile if you do use them.

5. Test on Real Devices

Always test your table on actual mobile devices, not just in a resized browser window on your desktop. Chrome’s developer tools have a mobile simulation mode, but it is not always perfectly accurate. Testing on a real phone will show you exactly how your visitors experience the table.

6. Make Sure Font Sizes Are Readable

Even if your table fits on a mobile screen, if the text is tiny and hard to read, users will still have a bad experience. Make sure your base font size is at least 14px (preferably 16px) inside table cells. You can set this in your Additional CSS.

7. Use Striped Rows for Readability

Alternating row colors (sometimes called zebra striping) make it much easier for users to track which data belongs to which row. This is especially helpful on mobile where rows may wrap or look compressed. Most table plugins including TablePress support striped rows as a built-in option.

8. Add Caption and Descriptions

Adding a caption (a brief title or description) above your table helps all users, including screen reader users, understand what the table is about before diving into the data. WordPress’s table block and TablePress both support captions.

Comparing the Methods: Which One Should You Use?

Now that we have covered the main approaches, here is a side-by-side comparison to help you decide which method is right for your situation.

Method	Responsive?	Requires Coding?	Best For	Cost
Default Block	Partial	No	Simple, short tables	Free
TablePress Plugin	Yes (with ext.)	No	Beginners, data tables	Free
Custom CSS	Yes	Yes (basic)	Dev-friendly users	Free
Flexible Table Block	Yes	No	Gutenberg users	Free
Page Builders	Yes	No	Divi/Elementor users	Varies

For most beginners, the TablePress plugin with the Responsive Tables extension is the recommended starting point. It is free, well-supported, easy to use, and gives you genuine responsive behavior without needing to know any code.

If you already use a page builder like Elementor, use its built-in table tools. If you are comfortable with code, the custom CSS horizontal scroll method is lightweight, fast, and requires no additional plugins.

Troubleshooting Common Responsive Table Problems

Even after following all the right steps, you might run into some issues. Here are the most common problems and how to fix them.

Problem 1: Table Is Still Overflowing on Mobile

If your table is still wider than the screen on mobile, the most likely causes are:

• You forgot to wrap the table in the overflow container div.
• There is a conflicting CSS rule from your theme that overrides your responsive code.
• The table has fixed widths set directly on columns (e.g., width=”500px”) that are not flexible.

Solution: Check that your wrapper div is present, check for conflicting CSS using your browser’s inspector tool, and make sure no column has a hard-coded pixel width wider than the mobile screen.

Problem 2: Horizontal Scroll Bar Appears on Desktop Too

This can happen if your table is actually wider than its container even on desktop. Check whether your table has a fixed width that is larger than your content area. Also check that you have set max-width: 100% on the table in your CSS.

Problem 3: Table Looks Broken After Plugin Update

Plugin updates can sometimes change how their CSS is applied. If your table looks different or broken after an update, check the plugin’s changelog to see if any styling changes were made. You may need to re-apply your customizations or contact the plugin’s support team.

Problem 4: Sorting and Filtering Do Not Work on Mobile

Some sorting and filtering features from TablePress use JavaScript that may conflict with certain mobile browsers or caching plugins. Make sure your caching plugin is not blocking JavaScript files from TablePress. If you use a caching plugin like WP Rocket or W3 Total Cache, check whether any JS minification or combining settings are causing issues.

Problem 5: Table Styles Do Not Match My Theme

If your table’s font, colors, or borders clash with your theme’s design, you will need to add some custom CSS to bring them in line. Use your browser’s developer tools (right-click on the table and choose Inspect) to see which CSS classes are applied and write overrides in your Customizer’s Additional CSS box.

Responsive Tables and SEO: Why It Matters

We mentioned earlier that responsive design affects your Google rankings. Let us dig into this a bit more so you understand the full picture.

Google’s Mobile-First Indexing

Since 2019, Google has used mobile-first indexing for all new websites. This means that when Google crawls your website to decide how to rank it in search results, it primarily looks at the mobile version of your content. If your tables are broken, unreadable, or cause layout issues on mobile, this negatively signals to Google that your page provides a poor user experience.

Core Web Vitals

Google also measures something called Core Web Vitals, which are specific metrics related to how fast and stable your page loads and displays. A table that causes a Cumulative Layout Shift (CLS) – which happens when elements suddenly move around as the page loads – will hurt your CLS score, which is one of the Core Web Vitals. Using properly responsive tables with defined container sizes helps prevent CLS issues.

Dwell Time and Bounce Rate

When users can actually read and interact with your table on mobile, they stay on your page longer. Google indirectly uses engagement signals to understand content quality. A high bounce rate (people leaving quickly) associated with poor mobile experience can over time affect how your content is perceived by search algorithms.

Structured Data for Tables

For advanced users, adding structured data (schema markup) to your tables can help Google better understand the data in your table and sometimes show enhanced results in search (like rich snippets). While this is beyond the scope of this article, it is worth knowing that a well-structured, responsive table is a good foundation for adding structured data.

Conclusion

Creating responsive tables in WordPress is not as complicated as it might sound. Whether you choose to use a plugin, write some CSS, or use your page builder’s built-in tools, you have multiple clear paths to achieve a professional, mobile-friendly result.

Here is a quick recap of what we have covered in this guide:

• We learned what responsive tables are and why they matter for user experience and SEO.
• We looked at the default WordPress table block and its limitations on mobile devices.
• We walked through using the TablePress plugin with its responsive extension – the best option for beginners.
• We covered how to use custom CSS with the horizontal scroll method and the column stacking method.
• We explored the Flexible Table Block plugin as a powerful code-free Gutenberg option.
• We discussed how page builders like Elementor and Divi handle responsive tables.
• We shared best practices for designing tables that are clean, readable, and mobile-friendly.
• We provided solutions to common problems you might face.
• We explained the connection between responsive tables and search engine optimization.

The most important takeaway is this: always test your tables on real mobile devices before publishing. Tools and plugins are helpful, but your eyes on an actual phone screen will catch problems that no automated tool will flag.

With the knowledge you have gained from this guide, you are now fully equipped to build beautiful, responsive tables in WordPress that provide a great experience for every visitor – no matter what device they are using.

Happy building!

About the Author

Jay Patel is the Founder of XSquareSEO, a full-service SEO agency with experience in on-page SEO, eCommerce SEO, link building, technical SEO, SaaS SEO, and local SEO. For more information, feel free to contact us. 

Explore More Guides

Change WP Fonts
Transfer WP Blog
WP Blog Start Costs
WP Archive Pages Access
Add XML File WordPress
WP Product Tabs Titles
Elementor Search Bar
ChatGPT WordPress Integration
Detect Hacked WordPress Site
Limit Audio Plays WordPress