# Automatically Make WordPress Tables Blocks Responsive for Mobile

A simple PHP and CSS code snippet that automatically converts WordPress block tables into mobile-responsive tables. Works with Bricks Builder and Core…

Canonical: https://www.ruhanirabin.com/code-snippet/automatically-make-wordpress-tables-blocks-responsive-for-mobile/

Jan 12, 2026WPCodeBox

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:

1. Tables stack vertically instead of side-by-side
2. Each row becomes its own section
3. Column headers appear next to their data
4. 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.

## Additional Snippets

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:

```css
@media (max-width: 650px)
```

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

```css
background: var(--bg-surface);
```

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

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

```
<?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');
```