Table Block: Table Headers shouldn't default to break-word

[supernovia]

Describe the bug
Table Headers (th tags) are explicitly set to break words, which can cause the table to look weird if the columns should have different widths. The screenshots say it best.

To reproduce
Steps to reproduce the behavior:

1. Create a new table in a post or page. For example, try "Workshop, Ages, Description, Times" as table headers. Add a few rows with data a table like that might have.
2. Make sure cells are not "Fixed" (as that for now means "evenly distributed" which would not be best for this table)
3. Publish (or preview) the page.

Expected behavior
In the editor, I see the expected behavior:

The table columns adjust to fit the content.

But, depending on the theme's content width, the table headings may break in awkward ways. See screenshots below from a handful of themes.

Screenshots

Editor version (please complete the following information):
Gutenberg plugin 8.3.0 (also happens without it)

Desktop (please complete the following information):

• OS: MacOS Current
• Browser: Chrome Current

(But break-word seems to happen regardless of browser, because we specified it in the CSS.)

Additional context
This came up in a support request on the .com forums. Normally we'd just tell them to edit the HTML to adjust the width for that cell, but right now the block doesn't want to accept any HTML editing.

I can see we explicitly opted to break-words, possibly to avoid long links making widths too wide if people paste long links in the table data. But, could we at least not break the headers? This fixes the issue nicely:

.wp-block-table.aligncenter th {
    word-break: normal;
}

[talldan]

When testing, I could only reproduce this if the table block has an alignment (e.g. align center). When not aligned the table block should be scrollable horizontally.

[supernovia]

Sorry I'm just seeing this. The table headers are aligned center by default, correct?

[t-hamano]

Hi @supernovia,

Sorry for the delay in my investigation into this issue.

In the table block, no text-align property is set for the cells. Therefore, the table header cell text will be centered according to the browser's default style. And word-break: break-word applies only when table cells are fixed or aligned left, center, or right.

gutenberg/packages/block-library/src/table/style.scss

Lines 30 to 55 in 4f94f09

	.has-fixed-layout {
	table-layout: fixed;
	width: 100%;
	td,
	th {
	word-break: break-word;
	}
	}
	&.alignleft,
	&.aligncenter,
	&.alignright {
	// Override default display property for align styles.
	// The table element needs to be kept as display table
	// for table features to work reliably.
	display: table;
	// Table cannot be 100% width if it is aligned, so set
	// width as auto.
	width: auto;
	td,
	th {
	word-break: break-word;
	}
	}

I think the default table would not have this problem. Here is the markup data used for the test.

Test Data

<!-- wp:heading -->
<h2 class="wp-block-heading">Default</h2>
<!-- /wp:heading -->

<!-- wp:table -->
<figure class="wp-block-table"><table><thead><tr><th>Workshop</th><th>Ages</th><th>Description</th><th>Time</th></tr></thead><tbody><tr><td>Bag O'cells</td><td></td><td></td><td></td></tr><tr><td>Bee Safari</td><td>All</td><td>Join our facilitator outdoors to learn hou to spot and identify bees and others pollinators in local gardens.</td><td></td></tr><tr><td>Combinatorics</td><td></td><td></td><td></td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Center Aligined</h2>
<!-- /wp:heading -->

<!-- wp:table {"align":"center"} -->
<figure class="wp-block-table aligncenter"><table><thead><tr><th>Workshop</th><th>Ages</th><th>Description</th><th>Time</th></tr></thead><tbody><tr><td>Bag O'cells</td><td></td><td></td><td></td></tr><tr><td>Bee Safari</td><td>All</td><td>Join our facilitator outdoors to learn hou to spot and identify bees and others pollinators in local gardens.</td><td></td></tr><tr><td>Combinatorics</td><td></td><td></td><td></td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Left Aligined</h2>
<!-- /wp:heading -->

<!-- wp:table {"align":"left"} -->
<figure class="wp-block-table alignleft"><table><thead><tr><th>Workshop</th><th>Ages</th><th>Description</th><th>Time</th></tr></thead><tbody><tr><td>Bag O'cells</td><td></td><td></td><td></td></tr><tr><td>Bee Safari</td><td>All</td><td>Join our facilitator outdoors to learn hou to spot and identify bees and others pollinators in local gardens.</td><td></td></tr><tr><td>Combinatorics</td><td></td><td></td><td></td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Right Aligined</h2>
<!-- /wp:heading -->

<!-- wp:table {"align":"right"} -->
<figure class="wp-block-table alignright"><table><thead><tr><th>Workshop</th><th>Ages</th><th>Description</th><th>Time</th></tr></thead><tbody><tr><td>Bag O'cells</td><td></td><td></td><td></td></tr><tr><td>Bee Safari</td><td>All</td><td>Join our facilitator outdoors to learn hou to spot and identify bees and others pollinators in local gardens.</td><td></td></tr><tr><td>Combinatorics</td><td></td><td></td><td></td></tr></tbody></table></figure>
<!-- /wp:table -->

When the browser width is greater than the content width, header cell text will not wrap, except for the center-aligned table.

Screenshot

When the device is narrow, the default table header cell text will not wrap and horizontal scrolling will occur.

Screenshot

Are these the behaviors you expect?

[priethor]

Let's close this issue, as it needs more info to be actionable. Please feel free to reopen again if there is more information. 🙏