Why does the width calculation without packaging change when it is nested inside an element with a table display?

Question

In our design, we need several columns to display the headers with an ellipsis, which I do not expect to be a big problem, but when they are nested inside the display: table , the calculations seem to be wrong.

The caveats are that we want a flexible layout, so a percentage width is required (a fixed width can solve the problem). And our layouts require display: table much further down the tree, and I cannot delete it without basic refactoring.

If you remove the display, everything works as I expected:

EXPECTED

But the presence of this mapping leads to the fact that the parent element takes into account the total width of the child elements, previously truncated (but taking into account nowrap). It looks like the initial rendering happens without defining the overflow and adds it after the fact (but from this point the calculation of the width is too large).

RESULT

I can guess why the rendering breaks, but I would like to get a more definitive answer on how the browser does this ... (Tested in Chrome / FF / Safari on Mac)

Answer 1

The reason for this is the use of layout methods for table layouts when using the auto layout method.

Details of how this works are explained in the section of section 17 of the CSS specification , but the key point is that the auto layout depends on the contents of the cell (therefore, it is so large when you force the content on one line), while the fixed layout only depends from the width of the table (this is what you expect).

If you just added table-layout:fixed to your .table selector, your problem should be resolved.