Repository navigation
[css-tables][css-sizing] What sizing keywords allow fixed table mode? #10937
Description
Situation
https://drafts.csswg.org/css-tables/#table-layout-property says
A table-root is said to be laid out in fixed mode whenever the computed value of the
table-layoutproperty is equal tofixed, and the specified width of the table root is either a<length-percentage>,min-contentorfit-content.
This is the logic that browsers use for the inline size:
- WebKit: https://searchfox.org/wubkat/rev/b36cbce69fddb7da33823f316bd8ead5bebee970/Source/WebCore/rendering/style/RenderStyleInlines.h#526
logicalWidth().isSpecified() || logicalWidth().isFitContent() || logicalWidth().isMinContent() - Firefox: https://searchfox.org/mozilla-central/rev/1e8cec3727d6e09f4af41bb3d202b7a4c326ed84/layout/tables/nsTableFrame.cpp#3482
(negated)iSize.IsAuto() || iSize.IsMaxContent() - Chrome: https://source.chromium.org/chromium/chromium/src/+/main:third_party/blink/renderer/core/style/computed_style.h;drc=572789ee61c7e857aa288a7ac7768b2b0b4f4dcc;l=1924
!LogicalWidth().HasAuto() && !LogicalWidth().HasMaxContent()
So we have a mismatch of keywords that accept fixed table layout:
| Value | Spec | WebKit | Gecko | Blink |
|---|---|---|---|---|
<length-percentage> |
✅ | ✅ | ✅ | ✅ |
auto |
❌ | ❌ | ❌ | ❌ |
min-content (*) |
✅ | ✅ | ✅ | ✅ |
max-content (*) |
❌ | ❌ | ❌ | ❌ |
fit-content (*) |
✅ | ✅ | ✅ | ✅ |
<fit-content()> |
❌ | ❌︎ | ✅ | ✅︎ |
contain |
❌ | ❌︎ | ✅︎ | ✅︎ |
stretch |
❌ | ❌︎ | ✅ | ✅︎ |
-webkit-fill-available |
❌︎ | ❌ | ✅ | ✅ |
-moz-available |
❌︎ | ❌︎ | ✅ | ✅︎ |
intrinsic |
❌︎ | ❌ | ✅︎ | ✅︎ |
min-intrinsic |
❌︎ | ❌ | ✅︎ | ✅︎ |
<calc-size()> should just behave as its basis.
(*) including -webkit- and -moz- prefixes.
✅: Supports the value (at least partially), and allows fixed table layout
✅︎: Doesn't support the value, but it would allow fixed table layout
❌: Supports the value (at least partially), and doesn't allows fixed table layout
❌︎: Doesn't support the value, but it wouldn't allow fixed table layout
Example
<!DOCTYPE html>
<div style="width: 0">
<table style="table-layout: fixed; width: -webkit-fill-available" border>
<tr><td>lorem ipsum</td></tr>
</table>
</div>On Firefox (with layout.css.webkit-fill-available.enabled = true) and Blink the table ignores the contents and is almost 0px wide, while on WebKit it's wider according to the text.
Changes
I think that <fit-content()> should allow fixed table layout, just like fit-content and min-content.
And maybe stretch should too, to match 100%? Also, -webkit-fill-available/-moz-available is kinda the same thing, and it allows fixed table layout on 2/3 of the major browsers.
Nobody implements contain, but we should also decide what to do with it.
Activity
bfgeek commentedon Sep 24, 2024
As an aside does anyone know what max-content doesn't apply?
(FWIW the "rule" that we've been applying to to a lot of these table behaviours, is if "width is auto" do the special behaviour - this comes up a suprising amount in table layout).
Loirooriol commentedon Sep 24, 2024
Yeah, it's kinda weird that, given enough available space,
fit-contentdoesn't behave likemax-content:Only checking for
autowould make this more future-proof.Loirooriol commentedon Sep 27, 2024
There was a broken test in https://github.com/web-platform-tests/wpt/blob/master/css/css-tables/fixed-layout-2.html, I have fixed it and tested all the cases above to help with interoperability.
Loirooriol commentedon Oct 5, 2024
WebKit/WebKit#34706 aligned
-webkit-fill-availablewith Blink and Gecko.31 remaining items
tabatkins commentedon Jun 23, 2025
So just verifying - you're saying the resolution needs to be changed so that "auto" table layout is triggered by an
autoormax-contentwidth, and "fixed" layout is triggered for everything else?bfgeek commentedon Jun 23, 2025
Yup thats right.
Bug 1951513 [wpt PR 51072] - [css-tables] Trigger fixed table layout …
Bug 1952857 [wpt PR 51231] - layout: Only prevent fixed table layout …
css-meeting-bot commentedon Sep 24, 2025
The CSS Working Group just discussed
[css-tables][css-sizing] What sizing keywords allow fixed table mode?, and agreed to the following:RESOLVED: width:max-content prevents table-layout:fixed from workingThe full IRC log of that discussion
<TabAtkins> iank_: we had a resolution to just have width:auto trigger fixed table layout<TabAtkins> iank_: this isn't web-compat, there's a library that sets width:max-content on tables and assumes they'll go into fixed mode
<TabAtkins> iank_: so my proposal is we have width:auto *or* max-content, we trigger fixed layout.
<TabAtkins> iank_: not including a calc-size(), it's those keywords literally
<TabAtkins> astearns: so just adding one more condition to the list?
<TabAtkins> iank_: yes
<TabAtkins> oriol: correction, auto/max-content *prevent* fixed layout.
<TabAtkins> fantasai: so you can set table-layout to fixed or auto. if you set 'fixed', but width is 'auto' (or, proposed, max-content), you'll instead get auto layout.
<TabAtkins> fantasai: can we instead just say that only extrinsic sizes allow fixed?
<TabAtkins> iank_: no, doesn't work
<TabAtkins> oriol: also if we add more conditions it's harder to opt into this behavior
<emilio> So we're resolving on Gecko's behavior right?
<TabAtkins> astearns: so proposed resolution: add max-content to the list of exceptions that prevent table-layout:fixed
<TabAtkins> iank_: I believe yes, gecko's behavior
<TabAtkins> RESOLVED: width:max-content prevents table-layout:fixed from working
[css-tables-3] Make only auto and max-content disallow fixed layout #…
Loirooriol commentedon Sep 1, 2026
@bfgeek Now that it's no longer "not initial", do you think
calc-size()should behave as its base?