Skip to content

Table block: default CSS not fully responsive #70454

@webexpr-dhenriet

Description

@webexpr-dhenriet

What problem does this address ?

1. hasFixedLayout is not exposed in the block settings UI

In the block.json file for the Table block, there is an attribute :
https://github.com/WordPress/gutenberg/blob/trunk/packages/block-library/src/table/block.json

"hasFixedLayout": {
  "type": "boolean",
  "default": true
}

However, this value is not configurable from the block sidebar (Inspector Controls).
This means users cannot toggle between table-layout: fixed and auto without custom code or filters.

👉 Request: Can this attribute be exposed in the UI as a toggle, or at least allow for easier overrides via block filters or global settings?

2. Responsive behavior does not work without custom CSS
By default, the Table block includes styles like :

.wp-block-table {
  overflow-x: auto;
}
.wp-block-table .has-fixed-layout {
  table-layout: fixed;
  width: 100%;
}

But this alone does not make the table responsive on small screens, especially when long content is involved.
To make tables truly responsive, we had to add the following CSS (used inside a media query) :

@media (max-width: $screen-wp-sm-max) {
  .wp-block-table {
    table {
      width: max-content !important;
      table-layout: auto !important;
    }
  }
}

Without this, the table remains rigid and does not allow horizontal scrolling as expected.

👉 Request: Could the default responsive CSS for the Table block be improved to better handle overflow and layout issues on mobile/tablet/desktop devices ?

Metadata

Metadata

Assignees

Labels

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions