如何设置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 {

  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%">&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 2

[您修改后的代码]

//你好，//你应该尝试这个

//我忘了还有一个属性max-width,

.divTableCell, .divTableHead {

  border: 1px solid #999999;

  display: table-cell;

  overflow: hidden;

  max-width: 120px!important;

Answer 3

表格必须由div组成吗？

如果没有，请使用 HTML<table>标记并显式设置其宽度及其显示属性。

然后您可以设置列的宽度：

https://codepen.io/daniel-knights/pen/KKdgYzW