1

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

.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>

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

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

1
  • 1
    Это стандартное поведение табличных свойств. В вашем случае проще на flexbox переписать. .itemstring {display: flex;} и чтобы ширина корректно указывалась .itemstring > div {flex: none;} 22 мар 2020 в 17:02

2 ответа 2

4
.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>

0

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

.itemstring > div{
  float: left;
}
2
  • По ширине выровнялись, но появилась другая проблема, высота ячейки с большим количеством текста - наибольшая. Остальные ячейки - меньше по высоте. Изначально идея была в том, чтобы оформление было как в таблице.
    – Yevgen
    22 мар 2020 в 17:05
  • Спасибо за подсказку, пока решил таким образом '.pricelist:first-child > .itemstring > div { float:left;} '
    – Yevgen
    22 мар 2020 в 17:17

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.