Как установить ширину столбцов в таблице 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

Должна ли таблица состоять из divs?

Если нет, используйте тег HTML <table> и задайте его ширину в явном виде и свойство отображения.

Тогда Вы можете установить ширину столбцов:

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