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.
Metadata
Metadata
Assignees
Labels
Type
Projects
Status