显示：表格单元格div忽略溢出：隐藏
[英]`display: table-cell` div ignores `overflow: hidden`
问题描述
I'm trying to restrict the width of the columns by defining a width attribute on the div.dcolumn DOM element. 
我试图通过在div.dcolumn DOM元素上定义width属性来限制列的width 。 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. 我希望隐藏溢出单元格的内容（例如9px列），并根据指定的width值保留布局。 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 个解决方案
解决方案1
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 . 在这里，我在.dcell内添加了<span>以获得省略号效果，因为它不能直接在.dcell上.dcell 。 Also added the width to .dcell in this case 25px . 在这种情况下， .dcell的宽度增加了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>
解决方案2
0 已采纳 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 ). 我找到了一个解决方案：诀窍是将表的总宽度设置为所有列的总和（并防止使用white-space: nowrap包装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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
单击时使用“显示：表格单元格”展开 div？ - Expand div with "display: table-cell" on click?
Div滑块和Display：Table-Cell的JS / CSS问题 - JS / CSS issue with Div Slider and Display:Table-Cell
显示：表格单元格绝对定位查询 - Display: table-cell absolute positioning query
在IE 7中替代display ='table-cell' - Substitution for display='table-cell' in IE 7
显示：表格单元格与行号不对齐 - Display: table-cell not aligning with the line numbers
边距/宽度在div元素位置上的排列不正确： 显示：表格单元格； 组 - Margin/width not rending properly on a div element position: fixed; display: table-cell; set
div中具有表单元格属性的水平对齐链接 - Horizontal align link inside div with table-cell property
阻止div表单元格在中心调整大小？ - Stop div table-cell from resizing in the center?
使砌体画廊在表单元格div中工作？ - Make Masonry gallery work inside table-cell div?
使用overflow：hidden在div父级内显示一个弹出窗口 - Display a popover inside a div parent with overflow:hidden
相关标签