html - Flexbox not working inside table? -
i'm using flexbox display text label along numeric value in narrow column, text truncated ellipsis if doesn't fit.
it worked fine, until had need place entire column in table-cell - @ point browser (chrome) ignored column width , made table wide enough fit text.
here's label layout:
<div class="line"> <span>very long label text</span> <span>12345</span> </div>
.line { display: flex; width: 100%; } .line span:first-child { white-space: nowrap; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .line span:last-child { flex-shrink: 0; margin-left: 5px; }
placing in regular div fixed width works expected. placing in table-cell doesn't:
fiddle: http://jsfiddle.net/98o7m7am/
.wrapper { width: 150px; } .table { display: table; } .table > div { display: table-cell; } .line { display: flex; width: 100%; } .line span:first-child { white-space: nowrap; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .line span:last-child { flex-shrink: 0; margin-left: 5px; }
<div class="wrapper"> <div class="line"> <span>very long label text</span> <span>12345</span> </div> </div> <div class="table wrapper"> <div> <div class="line"> <span>very long label text</span> <span>12345</span> </div> </div> </div>
update: ended 'solving' using more flexboxes instead of tables, still know why original example doesn't work.
that's because, default, tables use automatic table layout:
the css 2.1 spec doesn't define layout mode, suggests (non-normative) algorithm, reflects behavior of several popular html user agents.
according algorithm, table's width
treated minimum width, , real width enough content not overflow:
calculate minimum content width (mcw) of each cell: formatted content may span number of lines may not overflow cell box.
since have white-space: nowrap
, mcw width of full text.
to avoid that, can set initial width of first span 0:
.line span:first-child { width: 0; }
.wrapper { width: 150px; } .table { display: table; } .table > div { display: table-cell; } .line { display: flex; width: 100%; } .line span:first-child { width: 0; white-space: nowrap; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .line span:last-child { flex-shrink: 0; margin-left: 5px; }
<div class="wrapper"> <div class="line"> <span>very long label text</span> <span>12345</span> </div> </div> <div class="table wrapper"> <div> <div class="line"> <span>very long label text</span> <span>12345</span> </div> </div> </div>
alternatively, may want try fixed table mode, defined in spec (and more reliable), faster, , solves problem too.
table-layout: fixed;
.wrapper { width: 150px; } .table { display: table; table-layout: fixed; } .table > div { display: table-cell; } .line { display: flex; width: 100%; } .line span:first-child { white-space: nowrap; flex-grow: 1; overflow: hidden; text-overflow: ellipsis; } .line span:last-child { flex-shrink: 0; margin-left: 5px; }
<div class="wrapper"> <div class="line"> <span>very long label text</span> <span>12345</span> </div> </div> <div class="table wrapper"> <div> <div class="line"> <span>very long label text</span> <span>12345</span> </div> </div> </div>
Comments
Post a Comment