添加行后，設置列寬出現問題。如果運行代碼片段，可以非常清楚地看到單元格大小與指定值不匹配。在下面的情況下如何設置列的寬度？.divTable{ display: table; width: 100%;}.divTableRow { display: table-row;}.divTableHeading { background-color: #EEE; display: table-header-group;}.divTableCell, .divTableHead { border: 1px solid #999999; display: table-cell; padding: 3px 10px; }.divTableHeading { background-color: #EEE; display: table-header-group; font-weight: bold;}.divTableFoot { background-color: #EEE; display: table-footer-group; font-weight: bold;}.divTableBody { display: table-row-group;}<div class="divTable" style="border: 1px solid #000;"><div class="divTableBody"><div class="divTableRow"><div class="divTableCell" style="width:10%"> </div><div class="divTableCell" style="width:40%"> </div><div class="divTableCell" style="width:50%"> </div></div><div class="divTableRow"><div class="divTableCell"> </div><div class="divTableCell"> </div><div class="divTableCell"> </div></div><div class="divTableRow" >texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div><div class="divTableRow"><div class="divTableCell"> </div><div class="divTableCell"> </div><div class="divTableCell"> </div></div></div></div>
3 回答
慕的地8271018
TA貢獻1796條經驗 獲得超4個贊
你需要考慮table-layout: fixed;
.divTable {
display: table;
width: 100%;
table-layout: fixed;
}
.divTableRow {
display: table-row;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
}
.divTableCell,
.divTableHead {
border: 1px solid #999999;
display: table-cell;
padding: 3px 10px;
}
.divTableHeading {
background-color: #EEE;
display: table-header-group;
font-weight: bold;
}
.divTableFoot {
background-color: #EEE;
display: table-footer-group;
font-weight: bold;
}
.divTableBody {
display: table-row-group;
}
<div class="divTable" style="border: 1px solid #000;">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell" style="width:10%"> </div>
<div class="divTableCell" style="width:40%"> </div>
<div class="divTableCell" style="width:50%"> </div>
</div>
<div class="divTableRow">
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
</div>
<div class="divTableRow">texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div>
<div class="divTableRow">
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
<div class="divTableCell"> </div>
</div>
</div>
</div>
千巷貓影
TA貢獻1829條經驗 獲得超7個贊
[您修改后的代碼]
//你好，//你應該嘗試這個
//我忘了還有一個屬性max-width,
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
overflow: hidden;
max-width: 120px!important;
陪伴而非守候
TA貢獻1757條經驗 獲得超8個贊
表格必須由div組成嗎？
如果沒有，請使用 HTML<table>標記并顯式設置其寬度及其顯示屬性。
然后您可以設置列的寬度：
https://codepen.io/daniel-knights/pen/KKdgYzW
- 3 回答
- 0 關注
- 226 瀏覽
添加回答
舉報
0/150
提交
取消