`display: table-cell` div ignores `overflow: hidden`
Question
I'm trying to restrict the width of the columns by defining a width attribute on the div.dcolumn DOM element. However, for some reason this doesn't seem to work with an overflowing cell. I would like the overflowing cell's content to be hidden (eg the 9px column) and the layout to be preserved as per the specified width values. What are my options?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html style='height:100%'> <head> <style> .header { background-color: #eeeeee; padding: 0 0 0 0; border: 1px solid #cccccc; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; overflow: hidden; } .dtable { display: table; position: relative; table-layout: fixed; } .drow { display: table-row; } .dcell { display: table-cell; overflow: hidden; padding: 0 0 0 0; border: 1px solid #cccccc; cursor: default; } .dcolumn { display: table-column; } </style> </head> <body> <div class="dtable" style="top: 0px; left: 0px; height: 125px;"> <div class="dcolumn" style="width: 39px;"></div> <div class="dcolumn" style="width: 19px;"></div> <div class="dcolumn" style="width: 9px;"></div> <div class="dcolumn" style="width: 39px;"></div> <div class="dcolumn" style="width: 19px;"></div> <div class="drow header" style="height: 25px;"> <div class="dcell">0</div> <div class="dcell">1</div> <div class="dcell">2</div> <div class="dcell">3</div> <div class="dcell">4</div> </div> <div class="drow" style="height: 25px;"> <div class="dcell">0:0</div> <div class="dcell">0:1</div> <div class="dcell">long line not truncated</div> <div class="dcell">0:3</div> <div class="dcell">0:4</div> </div> <div class="drow" style="height: 25px;"> <div class="dcell">1:0</div> <div class="dcell">1:1</div> <div class="dcell">1:2</div> <div class="dcell">1:3</div> <div class="dcell">1:4</div> </div> </div> </body> </html>
2 answers
solution1
0 2018-10-22 18:07:39
here I have added a <span> inside of .dcell for getting the ellipsis effect, as it won't work directly on .dcell . Also added the width to .dcell in this case 25px .
this should work for you.
.header { background-color: #eeeeee; padding: 0 0 0 0; border: 1px solid #cccccc; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; overflow: hidden; } .dtable { display: table; position: relative; table-layout: fixed; } .drow { display: table-row; } .dcell { display: table-cell; overflow: hidden; width: 25px; padding: 0 0 0 0; border: 1px solid #cccccc; cursor: default; } .dcolumn { display: table-column; } .cell-data { display:block; width:inherit; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
<div class="dtable" style="top: 0px; left: 0px; height: 125px;"> <div class="dcolumn" style="width: 39px;"></div> <div class="dcolumn" style="width: 19px;"></div> <div class="dcolumn" style="width: 9px;"></div> <div class="dcolumn" style="width: 39px;"></div> <div class="dcolumn" style="width: 19px;"></div> <div class="drow header" style="height: 25px;"> <div class="dcell">0</div> <div class="dcell">1</div> <div class="dcell">2</div> <div class="dcell">3</div> <div class="dcell">4</div> </div> <div class="drow" style="height: 25px;"> <div class="dcell">0:0</div> <div class="dcell">0:1</div> <div class="dcell"> <span class="cell-data">long line not truncated</span></div> <div class="dcell">0:3</div> <div class="dcell">0:4</div> </div> <div class="drow" style="height: 25px;"> <div class="dcell">1:0</div> <div class="dcell">1:1</div> <div class="dcell">1:2</div> <div class="dcell">1:3</div> <div class="dcell">1:4</div> </div> </div>
solution2
0 ACCPTED 2018-10-22 20:12:39
I found a solution: The trick is to set the total width of the table to the sum of all columns (and prevent wrapping with white-space: nowrap ).
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html style='height:100%'> <head> <style> .header { background-color: #eeeeee; padding: 0 0 0 0; border: 1px solid #cccccc; cursor: default; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; -o-user-select: none; user-select: none; overflow: hidden; } .dtable { display: table; position: relative; table-layout: fixed; } .drow { display: table-row; } .dcell { display: table-cell; overflow: hidden; padding: 0 0 0 0; border: 1px solid #cccccc; cursor: default; white-space: nowrap; } .dcolumn { display: table-column; } </style> </head> <body> <div class="dtable" style="top: 0px; left: 0px; height: 125px; width: 130px"> <div class="dcolumn" style="width: 39px;"></div> <div class="dcolumn" style="width: 19px;"></div> <div class="dcolumn" style="width: 9px;"></div> <div class="dcolumn" style="width: 39px;"></div> <div class="dcolumn" style="width: 19px;"></div> <div class="drow header" style="height: 25px;"> <div class="dcell">0</div> <div class="dcell">1</div> <div class="dcell">2</div> <div class="dcell">3</div> <div class="dcell">4</div> </div> <div class="drow" style="height: 25px;"> <div class="dcell">0:0</div> <div class="dcell">0:1</div> <div class="dcell">long line not truncated</div> <div class="dcell">0:3</div> <div class="dcell">0:4</div> </div> <div class="drow" style="height: 25px;"> <div class="dcell">1:0</div> <div class="dcell">1:1</div> <div class="dcell">1:2</div> <div class="dcell">1:3</div> <div class="dcell">1:4</div> </div> </div> </body> </html>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Expand div with "display: table-cell" on click?
JS / CSS issue with Div Slider and Display:Table-Cell
Display: table-cell absolute positioning query
Substitution for display='table-cell' in IE 7
Display: table-cell not aligning with the line numbers
Margin/width not rending properly on a div element position: fixed; display: table-cell; set
Horizontal align link inside div with table-cell property
Stop div table-cell from resizing in the center?
Make Masonry gallery work inside table-cell div?
Display a popover inside a div parent with overflow:hidden
Related Tags