The Border Settings Tool(useBorderProps) for table blocks also affects the rules in the table (td th).

[nendeb]

Description

Table block can use the Border Settings Tool(useBorderProps) by adding appearanceTools in theme.json or add_theme_support( 'border' ) in the classic theme.
However, this Border Settings Tool is not working as configured, affecting even the inside of the table (td th).

I have added the class "has-individual-borders" to prevent it from affecting td and th in the table, and I have complemented it with CSS, but it is incomplete.

Current table block specifications
The table rules themselves are currently fixed by CSS.
There is no function to change the table rules.

Step-by-step reproduction instructions

Current CSS specification
Table rules are fixed with this CSS code.

/* gutenberg/build/block-library/blocks/table/style.css */
.wp-block-table td,
.wp-block-table th {
    border: 1px solid;
    padding: 0.5em;
}

Also, the class "has-individual-borders" is set for in-block editor corrections.

/* gutenberg/build/block-library/editor.css */
.wp-block-table table.has-individual-borders td,
.wp-block-table table.has-individual-borders th,
.wp-block-table table.has-individual-borders tr,
.wp-block-table table.has-individual-borders>* {
    border: 1px solid;
}

Case1

Table block in place (nothing changed)

Output HTML tags

<table>

This is standard.

Case2

Set all Border values to 0.

Output HTML tags

<table style="border-style:none;border-width:0px">

The table borders are overridden and erased.

This is caused by the following CSS, which affects the correct display.

/* gutenberg/build/block-library/blocks/table/style.css */
.wp-block-table table[style*=border-width] td,
.wp-block-table table[style*=border-width] th,
.wp-block-table table[style*=border-width] tr,
.wp-block-table table[style*=border-width]>* {
    border-style: inherit;
    border-width: inherit;
}

.wp-block-table table[style*=border-style] td,
.wp-block-table table[style*=border-style] th,
.wp-block-table table[style*=border-style] tr,
.wp-block-table table[style*=border-style]>* {
    border-style: inherit;
}

To display it correctly, either of the following methods will display it correctly.

1. Remove the above CSS,
2. Make the output HTML tags look like this.

<table style="border-top-width:0px;border-right-width:0px;border-bottom-width:0px;border-left-width:0px">

Case3

Set all Border values to 10.

Output HTML tags

<table style="border-width:10px">

The table rules are overridden and all are 10px.

The cause is that the following CSS affects them and they are not displayed correctly.

/* gutenberg/build/block-library/blocks/table/style.css */
.wp-block-table table[style*=border-width] td,
.wp-block-table table[style*=border-width] th,
.wp-block-table table[style*=border-width] tr,
.wp-block-table table[style*=border-width]>* {
    border-style: inherit;
    border-width: inherit;
}

To display it correctly, either of the following methods will display it correctly.

1. Remove the above CSS,
2. Make the output HTML tags look like this.

<table style="border-top-width:10px;border-right-width:10px;border-bottom-width:10px;border-left-width:10px">

What is your proposed solution?

In other words, in all cases, if you remove this CSS, it will display as expected.

/* gutenberg/build/block-library/blocks/table/style.css */
.wp-block-table table[style*=border-width] td,
.wp-block-table table[style*=border-width] th,
.wp-block-table table[style*=border-width] tr,
.wp-block-table table[style*=border-width]>* {
    border-style: inherit;
    border-width: inherit;
}

.wp-block-table table[style*=border-style] td,
.wp-block-table table[style*=border-style] th,
.wp-block-table table[style*=border-style] tr,
.wp-block-table table[style*=border-style]>* {
    border-style: inherit;
}

The class "has-individual-borders" for in-block editor corrections is also no longer needed.

However, erasing CSS in the above manner does not solve the original problem.
The Border Settings Tool(useBorderProps) is designed to place a border around the perimeter of a block, so do not change the border of a table (td or th).

Shouldn't the code be in the figure tag above the table tag?

As it is, it will be a major stumbling block when table manipulation functions are added in the future.

Screenshots, screen recording, code snippet

No response

Environment info

WordPress 6.4.1
Gutenberg 17.0.2
Theme TT4

Please confirm that you have searched existing issues in the repo.

Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

Yes

[t-hamano]

Thanks for the report.

Looking at #31265, which added border support to the Table block, it seems like the expected behavior is that border settings also affect cells.

Therefore, I will label this issue as an enhancement.