Why is table-layout: fixed affecting the width of the parent element? - html

Question

Can someone explain why my div with table-layout:fixed is changing the width of its parent element (body in this case) to make it 100% when it shouldn't be 100% since it's positioned?
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 80%; /* Any percentage value different from 0 */
table-layout:fixed;
outline: 2px solid blue;
}
<div class="c">d</div>
As you can see above, adding table-layout:fixed forces the body to be full width AND the percentage width on the div will work relatively to the width of the body!
This is not the case with the below snippet, where the behavior is somehow logical and intuitive:
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 80%;
/* table-layout:fixed; */
outline: 2px solid blue;
}
<div class="c">d</div>
How does table-layout:fixed affect the parent element, which is positioned in this case?
As a side note, using pixel values with width produces a logical result:
body {
border: 2px solid red;
height: 100vh;
margin:0;
padding: 0;
position: absolute;
}
.c{
display: table;
width: 200px;
table-layout:fixed;
outline: 2px solid blue;
}
<div class="c">d</div>
We can also have some overflow with that strange behavior:
body {
margin:0;
position:relative;
width:300px;
border-top:20px solid green;
}
.container {
border: 2px solid red;
height: 100vh;
position: absolute;
}
.c {
display: table;
width: 120%;
table-layout: fixed;
outline: 2px solid blue;
animation:change 2s linear infinite alternate;
}
#keyframes change {
from{width:1%;}
to {width:150%}
}
<div class="container">
<div class="c">d</div>
</div>

Answer 1

Looks like you're not the first to bring this up. You might be the second, though.
To be clear, this is a combination of two issues:
The width of an absolutely positioned element is shrink-to-fit. Somehow the shrink-to-fit width is being determined to be as wide as the absposed element's containing block will allow. (The containing block for the absolutely positioned body is the initial containing block.)
A percentage width on an element whose containing block depends on its contents for auto sizing results in undefined behavior.
Issue #2 is pretty easy to write off:
implementations agree not to calculate the width of either element more than once.
i.e. body is sized using shrink-to-fit, then the table is set to 80% of that width, and the size of body is "not computed again". The only "undefinedness" of this is that the spec doesn't require or disallow, or indeed care what implementations do.
So the question then boils down to why shrink-to-fit is yielding "as wide as possible" in #1 prior to determining the size of the table in #2. Here is how the spec describes shrink-to-fit for absposed elements:
[...] Roughly: calculate the preferred width by formatting the content without breaking lines other than where explicit line breaks occur, and also calculate the preferred minimum width, e.g., by trying all possible line breaks. CSS 2.1 does not define the exact algorithm. Thirdly, calculate the available width: this is found by solving for 'width' after setting 'left' (in case 1) or 'right' (in case 3) to 0.
Then the shrink-to-fit width is: min(max(preferred minimum width, available width), preferred width).
But this doesn't tell us why, or even that, the preferred width of a fixed-layout table is "as wide as its containing block will allow". Neither css-sizing-3 nor css-tables-3 appears to contain the answer.
According to David Baron (from the same thread), who works on Gecko:
Fixed-layout tables report an intrinsic max-content inline size as infinite.
(note that "max-content inline size" means the same thing as "preferred width")
So there's our answer. The unbounded max-content inline size of fixed-layout tables is what causes this table's absolutely positioned parent to be stretched as wide as its own containing block (the initial containing block) will allow, in contrast to auto-layout tables.
And, at least for now, this is as close as I'll get to an official source because I'm having trouble reaching the same conclusion just by reading css-sizing-3, and I'm unsure if David's statement is based on Gecko's behavior alone, behavior of all implementations, or on specified behavior.

Answer 2

This is my explanation based on the described above issue so it can be viewed as speculation based on the bounty requirements for "official resources".
When table-layout: fixed is applied, the content no longer dictates the layout, but instead, the browser uses any defined widths from the table's first row to define column widths. If no widths are present on the first row, the column widths are divided equally across the table, regardless of content inside the cells.
In order for a value of fixed to have any effect, the table's width has to be set to something other than auto (the default for the width property) ... source
Once table-layout:fixed; is applied without the parent container having any set width and its own width set in percents it would expand its parent container (whatever that container is body/div/etc) to 100% and take the specified width (in this case 80%) relative to that of the parent.
It would do this since its default purpose is with width being set to make sure its columns width is distributed evenly regardless if there are columns or not. If they aren't any columns it would treat the element as one column. To do that it would still need its width to be relative to its parent (when its own width is set in %).
Example table-layout:fixed is not applied since it has no defined width although it is set in the CSS, table-layout:auto is applied as that is the default:
body {
border: 2px solid red;
height: 100vh;
margin: 0;
padding: 0;
position: absolute;
}
.c {
display: table;
table-layout: fixed;
/* width: 80%; */
outline: 2px solid blue;
}
<div class="c">d</div>
Now let's set the width:
body {
border: 2px solid red;
height: 100vh;
margin: 0;
padding: 0;
position: absolute;
}
.c {
display: table;
table-layout: fixed;
width: 80%;
outline: 2px solid blue;
}
<div class="c">d</div>

Answer 3

In your second example,
body {
border : 2px solid red;
height : 100vh;
margin : 0;
padding : 0;
position : absolute;
}
.c {
display : table;
width : 80%;
outline : 2px solid blue;
/* table-layout : fixed; */
}
You have absolutely positioned the body, so it's taken out of normal flow and it doesn't influence the positioning or sizing of its .c child.
So the width of .c isn't 80% of the body as you might initially expect.
You can however use units like pixels or vw to set the width of .c and the result will be more intuitive, like this.
.c {
display : table;
width : 80vw;
outline : 2px solid blue;
/* width : 80%; */
/* table-layout : fixed; */
}
Similarly, when you use table-layout:fixed; your browser uses an algorithm to calculate the width of the table which is similar to using units like pixels or vw to calculate the width for the table.
To quote from the W3C spec
17.5.2.1 Fixed table layout With this (fast) algorithm, the horizontal layout of the table does not depend on the contents of the cells ...