顯示：表格單元格div忽略溢出：隱藏
[英]`display: table-cell` div ignores `overflow: hidden`
問題描述
我試圖通過在div.dcolumn DOM元素上定義width屬性來限制列的width 。 但是，由於某種原因，這似乎不適用於單元格溢出。 我希望隱藏溢出單元格的內容（例如9px列），並根據指定的width值保留布局。 我有什么選擇？
<!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
在這里，我在.dcell內添加了<span>以獲得省略號效果，因為它不能直接在.dcell上.dcell 。 在這種情況下， .dcell的寬度增加了25px 。
這應該為您工作。
.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
我找到了一個解決方案：訣竅是將表的總寬度設置為所有列的總和（並防止使用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>
邊距/寬度在div元素位置上的排列不正確： 顯示：表格單元格； 組
[英]Margin/width not rending properly on a div element position: fixed; display: table-cell; set
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.