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


with our design end needing multiple columns display titles ellipsis don't expect big deal when nested inside of display: table calculations seem incorrect.

the caveats want responsive layout percentage widths required (fixed widths solve problem). , our layouts require display: table further tree , can't removing without major refactor.

if remove display works expect:

expected

but having display causes parent take account child elements total width pre-truncated (but nowrap taken account). if initial rendering happens without overflow being defined , adds after fact (but point width calculation way large).

result

i can guess @ why rendering breaking more definitive answer how browser renders this... (tested in chrome/ff/safari on mac)

the reason has got way tables layout cells when using auto layout method.

the details of how works explained in section 17 of css spec, key point auto layout depends on contents of cell (which why it's big when force content onto 1 line), whereas fixed layout dependent on table width (which you're expecting).

if add table-layout:fixed .table selector, problem should solved.


Comments

Popular posts from this blog

linux - Does gcc have any options to add version info in ELF binary file? -

android - send complex objects as post php java -

charts - What graph/dashboard product is facebook using in Dashboard: PUE & WUE -