{table,cell} width too big when cell has inline and other column has width restriction |
||
Issue description
table {
border-spacing: 0px;
}
td {
outline: 1px solid black;
padding: 0px;
}
x-word {
display: inline-block;
width: 50px;
height: 10px;
background: green;
}
x-long-word {
display: inline-block;
width: 200px;
height: 10px;
background: orange;
}
<div style="width:500px">
<table>
<tr>
<td></td>
<td> <!--width:150px here doesn't repro -->
<x-word></x-word>
<x-word></x-word>
<x-word></x-word>
<x-word></x-word>
</td>
</tr>
<tr>
<td>
<x-long-word></x-long-word>
</td>
<td style="width: 150px"></td>
</tr>
</table>
</div>
<div id=log></div>
http://jsfiddle.net/dgrogan/hbtm85uk/5/
FF shows what I'd expect, column 1 is 200px wide, column 2 is 150px wide and table is 350px wide. For some reason Blink makes column 1 262px wide. Where does the extra 62px come from??
,
Jul 9
Unconstrained max-width of the first column is 200px. Unconstrained max-width of the second column is 200px + three whitespaces. One cell in the second column has a fixed width, but the another cell in the second column (i.e. the one in the first row) has auto width and large max-width. Not sure if a fixed width on one cell should make us disregard the large max width of that other cell. I understand where those extra 62px come from, though. The max width of table is the sum of the max width of all columns. So the width of the table becomes 200px + 200px + three whitespaces. If we assume that the width of a whitespace is 4px, thaẗ́'s a total of 12px of whitespace. 200px + 200px + 12px = 412px. The containing block is 500px, so 412px is just fine. Now, for some reason, when distributing space to the columns during layout, we suddenly honor the specified fixed width on the cell. So the second column will become 150px. The first column will get the rest. 412px - 150px = 262px. Another semi-interesting detail is that Presto agrees with us. Edge, on the other hand, just ignores the fixed width on the cell altogether, it seems. In other words, there's not a lot of interoperability here. :) Tables are weird, and it's not obvious to me that we're doing it wrong. Is this in a spec somewhere?
,
Jul 9
Thanks for great explanation and checking Edge (I lost my windows VM last week). I will look into it further.
,
Aug 21
Did some more digging here. According to the spec as is now, the max width of the left column is 200 (duh) and the max width of the right column is 150[1]. So FF provisionally has it right. Except that https://github.com/w3c/csswg-drafts/issues/2802#issuecomment-400481537 discusses that the spec has max width calculations wrong. So I'm going to follow up there. [1] https://docs.google.com/document/d/1tljMp6o9xSTRpt1_DYypWWMufzxhhRi4Fy4K8Wpdmis/edit is my notes tracing through the spec, available to chromium.org I think. Re: Edge. Edge appears to ignore the fixed width if other cells in the column have larger max content width. But if the fixed width is larger, the fixed width contributes both to table width and column distribution. FWIW. Cosmetic updates: http://jsfiddle.net/dgrogan/hbtm85uk/9/ |
||
►
Sign in to add a comment |
||
Comment 1 by dgro...@chromium.org
, Jul 3