添加行后，設(shè)置列寬出現(xiàn)問(wèn)題。如果運(yùn)行代碼片段，可以非常清楚地看到單元格大小與指定值不匹配。在下面的情況下如何設(shè)置列的寬度？.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貢獻(xiàn)1796條經(jīng)驗(yàn) 獲得超4個(gè)贊
你需要考慮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貢獻(xiàn)1829條經(jīng)驗(yàn) 獲得超7個(gè)贊
[您修改后的代碼]
//你好，//你應(yīng)該嘗試這個(gè)
//我忘了還有一個(gè)屬性max-width,
.divTableCell, .divTableHead {
border: 1px solid #999999;
display: table-cell;
overflow: hidden;
max-width: 120px!important;
陪伴而非守候
TA貢獻(xiàn)1757條經(jīng)驗(yàn) 獲得超8個(gè)贊
表格必須由div組成嗎？
如果沒(méi)有，請(qǐng)使用 HTML<table>標(biāo)記并顯式設(shè)置其寬度及其顯示屬性。
然后您可以設(shè)置列的寬度：
https://codepen.io/daniel-knights/pen/KKdgYzW
- 3 回答
- 0 關(guān)注
- 283 瀏覽
添加回答
舉報(bào)
0/150
提交
取消