如何设置div表中列的宽度？

Question

添加行后，设置列宽出现问题。如果运行代码片段，可以非常清楚地看到单元格大小与指定值不匹配。

在下面的情况下如何设置列的宽度？

.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%">&nbsp;</div>

<div class="divTableCell" style="width:40%">&nbsp;</div>

<div class="divTableCell" style="width:50%">&nbsp;</div>

</div>

<div class="divTableRow">

<div class="divTableCell">&nbsp;</div>

<div class="divTableCell">&nbsp;</div>

<div class="divTableCell">&nbsp;</div>

</div>

<div class="divTableRow" >texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div>

<div class="divTableRow">

<div class="divTableCell">&nbsp;</div>

<div class="divTableCell">&nbsp;</div>

<div class="divTableCell">&nbsp;</div>

</div>

</div>

</div>

Answer 1

你需要考虑table-layout: fixed;.divTable {&nbsp; display: table;&nbsp; width: 100%;&nbsp; table-layout: fixed;}.divTableRow {&nbsp; display: table-row;}.divTableHeading {&nbsp; background-color: #EEE;&nbsp; display: table-header-group;}.divTableCell,.divTableHead {&nbsp; border: 1px solid #999999;&nbsp; display: table-cell;&nbsp; padding: 3px 10px;}.divTableHeading {&nbsp; background-color: #EEE;&nbsp; display: table-header-group;&nbsp; font-weight: bold;}.divTableFoot {&nbsp; background-color: #EEE;&nbsp; display: table-footer-group;&nbsp; font-weight: bold;}.divTableBody {&nbsp; display: table-row-group;}<div class="divTable" style="border: 1px solid #000;">&nbsp; <div class="divTableBody">&nbsp; &nbsp; <div class="divTableRow">&nbsp; &nbsp; &nbsp; <div class="divTableCell" style="width:10%">&nbsp;</div>&nbsp; &nbsp; &nbsp; <div class="divTableCell" style="width:40%">&nbsp;</div>&nbsp; &nbsp; &nbsp; <div class="divTableCell" style="width:50%">&nbsp;</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="divTableRow">&nbsp; &nbsp; &nbsp; <div class="divTableCell">&nbsp;</div>&nbsp; &nbsp; &nbsp; <div class="divTableCell">&nbsp;</div>&nbsp; &nbsp; &nbsp; <div class="divTableCell">&nbsp;</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="divTableRow">texttexttexttexttexttexttexttexttexttexttexttexttexttexttextte xttexttexttexttexttexttextt exttexttexttexttextt xttexttexttexttexttexttex ttexttext</div>&nbsp; &nbsp; <div class="divTableRow">&nbsp; &nbsp; &nbsp; <div class="divTableCell">&nbsp;</div>&nbsp; &nbsp; &nbsp; <div class="divTableCell">&nbsp;</div>&nbsp; &nbsp; &nbsp; <div class="divTableCell">&nbsp;</div>&nbsp; &nbsp; </div>&nbsp; </div></div>

Answer 2

[您修改后的代码]//你好，//你应该尝试这个//我忘了还有一个属性max-width,.divTableCell, .divTableHead {&nbsp; border: 1px solid #999999;&nbsp; display: table-cell;&nbsp; overflow: hidden;&nbsp; max-width: 120px!important;

Answer 3

表格必须由div组成吗？如果没有，请使用 HTML<table>标记并显式设置其宽度及其显示属性。然后您可以设置列的宽度：https://codepen.io/daniel-knights/pen/KKdgYzW