Создание таблицы стилями CSS - строки получаются разной ширины

Пишу таблицу стилями Код страницы

.priceblock {
  display: table;
  width: 100%;
  min-width: 100%;
}

.pricelist {
  display: table-row;
  width: 100%;
  min-width: 100%;
}

.itemstring {
  width: 100%;
}

.itemname,
.itemmodel,
.itemprice,
.itemavailability,
.itemdescription {
  border: solid 0px #bbb;
}

.itemname {
  display: table-cell;
  width: 20%;
  background-color: #aba;
}

.itemmodel {
  display: table-cell;
  width: 20%;
  background-color: #acc;
}

.itemdescription {
  display: table-cell;
  width: 40%;
  background-color: #a12;
}

.itemoffer {}

.itemprice {
  display: table-cell;
  width: 10%;
  background-color: #afc;
}

.itemavailability {
  display: table-cell;
  width: 10%;
  background-color: #fcc;
}
<div class="priceblock">
  <div class="pricelist">
    <div class="itemstring">
      <div class="itemname">Наименование</div>
      <div class="itemmodel">Тип</div>
      <div class="itemdescription">Описание</div>
      <div class="itemprice">Цена</div>
      <div class="itemavailability">Наличие</div>
    </div>
  </div>
  <div class="pricelist">
    <div class="itemstring">
      <div class="itemname">Наименование Наименование Наименование Наименование </div>
      <div class="itemmodel"> Тип Тип Тип Тип Тип Тип Тип Тип Тип </div>
      <div class="itemdescription">Описание Описание Описание Описание Описание Описание Описание Описание Описание </div>
      <div class="itemprice">Цена</div>
      <div class="itemavailability">Наличие</div>
    </div>
  </div>
</div>

Результат - при заполнении таблицы - колонки разных строк получаются разной ширины, и вся таблица тоже.

Почему - не могу понять. Подскажите.


Ответы (2 шт):

Автор решения: vantal

Добавь в стили:

.itemstring > div{
  float: left;
}
→ Ссылка
Автор решения: HamSter
.itemstring {
  width: 100%;

  display: table;
    table-layout: fixed;
}

.priceblock {
  display: table;
  width: 100%;
  min-width: 100%;
}

.pricelist {
  display: table-row;
  width: 100%;
  min-width: 100%;
}

.itemstring {
  width: 100%;
  
  display: table;
    table-layout: fixed;
}

.itemname,
.itemmodel,
.itemprice,
.itemavailability,
.itemdescription {
  border: solid 0px #bbb;
}

.itemname {
  display: table-cell;
  width: 20%;
  background-color: #aba;
}

.itemmodel {
  display: table-cell;
  width: 20%;
  background-color: #acc;
}

.itemdescription {
  display: table-cell;
  width: 40%;
  background-color: #a12;
}

.itemoffer {}

.itemprice {
  display: table-cell;
  width: 10%;
  background-color: #afc;
}

.itemavailability {
  display: table-cell;
  width: 10%;
  background-color: #fcc;
}
<div class="priceblock">
  <div class="pricelist">
    <div class="itemstring">
      <div class="itemname">Наименование</div>
      <div class="itemmodel">Тип</div>
      <div class="itemdescription">Описание</div>
      <div class="itemprice">Цена</div>
      <div class="itemavailability">Наличие</div>
    </div>
  </div>
  <div class="pricelist">
    <div class="itemstring">
      <div class="itemname">Наименование Наименование Наименование Наименование </div>
      <div class="itemmodel"> Тип Тип Тип Тип Тип Тип Тип Тип Тип </div>
      <div class="itemdescription">Описание Описание Описание Описание Описание Описание Описание Описание Описание </div>
      <div class="itemprice">Цена</div>
      <div class="itemavailability">Наличие</div>
    </div>
  </div>
</div>

→ Ссылка