Automatically Make WordPress Tables Blocks Responsive for Mobile 2026

Automatically Make WordPress Tables Blocks Responsive for Mobile

This code snippet makes your WordPress block tables responsive automatically. No plugin required.

Introduction

WordPress block tables break on mobile. Headers disappear, content gets squished, and users scroll horizontally to read your data. Not ideal.

Most plugins add bloat. You get features you don’t need, extra database queries, and another thing to update.

The Solution

This code snippet makes your WordPress block tables responsive automatically. No plugin required.

Here’s what happens on mobile:

Tables stack vertically instead of side-by-side
Each row becomes its own section
Column headers appear next to their data
Colors adapt to your theme (light or dark mode)

How It Works

The snippet has two parts:

CSS (Mobile Styles)

Triggers at 650px screen width
Converts table rows and cells to block display
Hides the original header row
Shows column labels inline with data
Uses your theme’s color variables for consistency

JavaScript (Dynamic Labels)

Reads your table headers automatically
Adds labels to each cell using data-column-label attributes
Runs on page load for all block tables

Installation

Option 1: functions.php Copy the code into your child theme’s functions.php file.

Option 2: Code Snippets Plugin Install “Fluent Snippets” or “WPCodeBox”, create a new snippet, paste the code, and activate.

Compatibility

Works with:

WordPress block tables (Gutenberg)
Bricks Builder
Core Framework
Any theme using CSS variables for colors

The code uses Core Framework variables (--color-background, --color-text) with fallbacks for standard themes.

What You Get

Before (Mobile):

Horizontal scrolling
Hidden columns
Cramped content

After (Mobile):

Clean vertical layout
All data visible
Column headers inline
Theme-matched colors

Code Features

Inline comments explaining each section
Non-breaking spaces in labels (proper rendering)
No external dependencies

Performance

Zero impact on desktop. Mobile gets a small inline CSS block and lightweight JavaScript that runs once on page load. No external files, no HTTP requests.

When to Use This

You have tables in your content and need them mobile-friendly. You don’t want a plugin. You’re comfortable adding code to your site.

When Not to Use This

You already have a table plugin that handles responsive design. You need advanced features like sorting, filtering, or CSV imports. You want a no-code solution with a visual interface.

Code Sample

Version 1.0.4 includes:

Automatic responsive conversion
Dark mode support
Core Framework integration
Dynamic header labeling
Mobile-optimized spacing

Customization

Change the breakpoint by modifying this line:

@media (max-width: 650px)

Adjust colors by updating your Core Framework variables or replace them with hex codes:

background: var(--bg-surface);

If you would like to change values for normal colors – look for background or color values.

Performance

WordPress tables work fine on desktop. This snippet fixes the mobile experience without adding plugin overhead.

Copy the code, paste it in, and your tables adapt automatically. That’s it.

PHP

<?php
/**
 * Make WordPress Block Tables Responsive
 * 
 * @package         Responsive_Tables
 * @version         1.0.4
 * @author          Ruhani Rabin
 * @description     Automatically converts WordPress block-based tables into responsive, mobile-friendly tables
 * @last_modified   2026-01-12 22:45:00 GMT+8
 * 
 * Installation:
 * Add this code to your theme's functions.php file or use a code snippets plugin
 * 
 * Changelog:
 * 1.0.4 - 2026-01-12 22:45:00 GMT+8 - Switched to Core Framework CSS variables for automatic theme color adaptation
 * 1.0.3 - 2026-01-12 22:40:00 GMT+8 - Added dark mode support for better contrast and readability
 * 1.0.2 - 2026-01-12 22:35:00 GMT+8 - Fixed spacing issue in column labels (using non-breaking space)
 * 1.0.1 - 2026-01-12 22:30:00 GMT+8 - Fixed text alignment issue (changed from right to left)
 * 1.0.0 - 2026-01-12 22:00:00 GMT+8 - Initial release
 */

// Enqueue the responsive table CSS
function responsive_tables_enqueue_styles() {
    // Only load on frontend
    if (!is_admin()) {
        wp_add_inline_style('wp-block-library', '
            @media (max-width: 650px) {
                .wp-block-table table tr,
                .wp-block-table table td,
                .wp-block-table table th {
                    display: block;
                    clear: both;
                    height: auto;
                }

                .wp-block-table table td,
                .wp-block-table table th {
                    text-align: left;
                    width: auto;
                    box-sizing: border-box;
                    overflow: auto;
                }

                .wp-block-table table tr:nth-child(even),
                .wp-block-table table tr:nth-child(even) td,
                .wp-block-table table tr:nth-child(even) th {
                    background: var(--bg-surface);
                    color: var(--text-title);
                }

                .wp-block-table table tr:nth-child(odd),
                .wp-block-table table tr:nth-child(odd) td,
                .wp-block-table table tr:nth-child(odd) th {
                    background: var(--bg-body);
                    color: var(--text-title);
                }

                .wp-block-table table td,
                .wp-block-table table th {
                    padding: 10px;
                }

                .wp-block-table table td[data-column-label]:before,
                .wp-block-table table th[data-column-label]:before {
                    display: inline-block;
                    content: attr(data-column-label);
                    float: left;
                    text-align: left;
                    font-weight: bold;
                    white-space: pre-line;
                    max-width: 49%;
                }

                .wp-block-table table thead tr:first-of-type {
                    display: none;
                }

                .wp-block-table table td > *,
                .wp-block-table table th > * {
                    max-width: 49%;
                    display: inline-block;
                }
            }
        ');
    }
}
add_action('wp_enqueue_scripts', 'responsive_tables_enqueue_styles');

// Add JavaScript to dynamically add data-column-label attributes
function responsive_tables_enqueue_script() {
    if (!is_admin()) {
        wp_add_inline_script('jquery', '
            jQuery(document).ready(function($) {
                $(".wp-block-table table").each(function() {
                    var table = $(this);
                    var headers = [];
                    
                    // Get header text from first row
                    table.find("thead tr:first-of-type th, tbody tr:first-of-type th, tbody tr:first-of-type td").each(function(index) {
                        headers[index] = $(this).text().trim();
                    });
                    
                    // Add data-column-label to each cell
                    table.find("tbody tr").each(function(rowIndex) {
                        // Skip first row if it contains headers
                        var isFirstRow = $(this).is(":first-child");
                        var firstCellIsHeader = $(this).find("th").length > 0 && isFirstRow;
                        
                        if (!firstCellIsHeader) {
                            $(this).find("td, th").each(function(cellIndex) {
                                if (headers[cellIndex]) {
                                    $(this).attr("data-column-label", headers[cellIndex] + ":\u00A0");
                                }
                            });
                        }
                    });
                });
            });
        ');
    }
}
add_action('wp_enqueue_scripts', 'responsive_tables_enqueue_script');

Leave the first comment (Cancel Reply)

View all posts

PHP
WordPress
WPCodebox