Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

table block: layout fixed has 100% width #12294

Open
Tracked by #32400
joyously opened this issue Nov 25, 2018 · 3 comments
Open
Tracked by #32400

table block: layout fixed has 100% width #12294

joyously opened this issue Nov 25, 2018 · 3 comments
Labels
[Block] Table Affects the Table Block [Type] Enhancement A suggestion for improvement.

Comments

@joyously
Copy link

&.has-fixed-layout {
table-layout: fixed;
width: 100%;
}

Having table layout fixed should not force the table to be 100% width.

@designsimply designsimply added Needs Design Feedback Needs general design feedback. [Block] Table Affects the Table Block labels Nov 26, 2018
@karmatosed karmatosed removed the Needs Design Feedback Needs general design feedback. label Nov 28, 2018
@aduth
Copy link
Member

aduth commented Jun 7, 2019

@karmatosed Should the removal of "Needs Design Feedback" label be interpreted as approval in the proposed change?

It's not really clear to me from the issue what's considered wrong with the styling. Without occupying the full width of its container, the "Fixed width" layout won't have any effect by default, unless the theme explicitly provides its own widths for the table. This is still possible to do, so it seems like a sensible default. Alternatively, it could be considered as part of the opt-in default block styles, implemented by moving the style into a theme.scss file.

@joyously
Copy link
Author

joyously commented Jun 7, 2019

Without occupying the full width of its container, the "Fixed width" layout won't have any effect by default

This isn't true. The table-layout: fixed tells the browser to use the first row as the widths for the columns for the whole table, instead of it calculating which cells are widest and using that. It has nothing to do with the overall width of the table.
Any style that is opinionated like width:100% should not be an editor style, but if it is anywhere, it should be opt-in.

@aduth
Copy link
Member

aduth commented Jun 7, 2019

The table-layout: fixed tells the browser to use the first row as the widths for the columns for the whole table, instead of it calculating which cells are widest and using that.

Hm. In retrospect, I did misinterpret what table-layout: fixed does, and what you're saying about first row cell widths is true, but on closer inspection, it does still seem to be impacted in some conditions by the width of the table.

With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells; it only depends on the table's width, the width of the columns, and borders or cell spacing.

[...]

In the fixed table layout algorithm, the width of each column is determined as follows:

  • A column element with a value other than 'auto' for the 'width' property sets the width for that column.
  • Otherwise, a cell in the first row with a value other than 'auto' for the 'width' property determines the width for that column. If the cell spans more than one column, the width is divided over the columns.
  • Any remaining columns equally divide the remaining horizontal table space (minus borders or cell spacing).

(Emphasis mine)

https://www.w3.org/TR/CSS2/tables.html#fixed-table-layout

In any case, it's fair to say that my previous assessment was inaccurate in saying there's no effective difference without the 100% width.

@jordesign jordesign added the [Type] Enhancement A suggestion for improvement. label Aug 2, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Table Affects the Table Block [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

No branches or pull requests

5 participants