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