How to Make WordPress Tables Mobile-Friendly

Have you ever had trouble reading tables on your smartphone when using WordPress?

Tables are useful for organizing and displaying information clearly on websites. When creating content with WordPress, they come in handy for comparing data or displaying lists. However, have you ever spent time carefully creating a table only to find that it becomes distorted or too hard to read when viewed on a smartphone?

While a table may look neatly aligned on a large computer screen, it’s common for the display to break on a smartphone’s smaller screen due to insufficient width. This can lead to visitors missing out on your content or getting frustrated and leaving the site.

If you’ve encountered such issues, you’re definitely not alone. Making tables responsive in WordPress is a common challenge for many website administrators. However, with a few adjustments, you can resolve this problem.

If you’re using Bootstrap 5 with WordPress, making your tables responsive is key to improving smartphone readability. Below are some practical methods explained in detail.

✅ Method 1: Enable horizontal scrolling with table-responsive class

This is the standard method in Bootstrap 5.

 




Column 1
Column 2
Column 3




Data 1
Data 2
Data 3

Explanation:

• By adding table-responsive to the parent of the <table>, horizontal scrolling is enabled on small screens.
• Bootstrap 5 automatically applies overflow-x: auto.

✅ Method 2: Apply responsiveness only for certain screen sizes (e.g., table-responsive-sm)

If you want to apply responsiveness based on screen size, use the following:

... 

Breakpoints:

• table-responsive-sm: scrolls below 576px
• table-responsive-md: scrolls below 768px
• table-responsive-lg: scrolls below 992px
• table-responsive-xl: scrolls below 1200px
• table-responsive-xxl: scrolls below 1400px

✅ Method 3: Collapse columns with CSS (custom approach)

With the following CSS, you can style the table to display one column at a time on mobile devices (converted to a list-like layout, not a traditional table).

@media (max-width: 576px) { table thead { display: none; } table, table tbody, table tr, table td { display: block; width: 100%; } table tr { margin-bottom: 1rem; border: 1px solid #ddd; padding: 0.5rem; } table td::before { content: attr(data-label); font-weight: bold; display: block; margin-bottom: 0.5rem; } }

Output from the PHP side should look like this:

<td data-label="Column Name">Data</td>

✅ Method 4: Display tables in card format (for complex data)

For smartphones, converting tables into a “card-style layout” improves readability. This is especially effective when you have fewer data entries or lots of information per entry.

✅ Supplement: Where to output in WordPress

• When used on pages or posts: Output HTML using a custom template or shortcode.
• If generated by a plugin or function: Include table-responsive in the echoed HTML.

🔚 Summary