Why does no-wrap width calculation change when it is nested inside of an element with a display of table?

Question

With our design we end up needing multiple columns to display titles with ellipsis which I don't expect to be a big deal but when they are nested inside of a display: table the calculations seem to be incorrect.

The caveats are that we want a responsive layout so percentage widths are required (fixed widths would solve the problem). And our layouts do require a display: table much further up the tree and I can't removing it without a major refactor.

If you remove the display everything works as I would expect:

EXPECTED

But having that display causes the parent to take into account the child elements total width pre-truncated (but with nowrap taken into account). It is as if the initial rendering happens without an overflow being defined and adds it after the fact (but by that point the width calculation is way too large).

RESULT

I can guess at why the rendering is breaking but I would like a more definitive answer about how the browser renders this... (Tested in Chrome/FF/Safari on Mac)

Answer 1

The reason for this has got to do with the way tables layout cells when using the auto layout method.

The details of how it works are explained in section 17 of the CSS spec, but the key point is that the auto layout depends on the contents of the cell (which is why it's so big when you force your content onto one line), whereas the fixed layout is only dependent on the table width (which is what you're expecting).

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