Problem

The current core/table block in Gutenberg does not provide a built-in responsive solution for handling wide tables on smaller screens.

When tables contain multiple columns or long content, they become difficult to read on mobile devices. Content often wraps excessively or becomes visually cramped, significantly impacting usability.

At the moment, developers must rely on custom CSS (e.g., horizontal scrolling wrappers), which leads to inconsistent implementations across sites.

Proposed Solution

Introduce an optional responsive mode for the core/table block that enables horizontal scrolling for wide tables.

This should be implemented as an opt-in feature to avoid breaking existing layouts.

Suggested Implementation

1. Add a toggle control in block settings:

• Label: “Enable responsive scroll”
• Default: Off

2. When enabled, apply a class to the block:

<figure class="wp-block-table is-responsive">

3. Add minimal CSS:

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

.wp-block-table.is-responsive table {
  width: 100%;
  min-width: 700px;
}

Benefits

• Improves readability of tables on mobile devices
• Provides a consistent, built-in solution instead of requiring custom CSS
• Keeps behavior opt-in and non-breaking
• Aligns with responsive patterns used in modern web applications

Additional Context

Many modern SaaS and documentation websites handle wide comparison tables using horizontal scroll. Providing this as a native option in the table block would improve accessibility and user experience significantly.

Screenshots / Examples

(Current behavior: content wraps awkwardly and becomes hard to scan on mobile)

(Proposed behavior: horizontal scroll allows full table visibility without layout breakage)

Compatibility

• Backward compatible (feature is opt-in)
• No impact on existing tables unless enabled
• Minimal CSS footprint

Summary

This proposal introduces a simple, optional enhancement to improve mobile usability of tables in Gutenberg without imposing design constraints on existing content.