Небольшая задачка с высотой элементов

165

20 апреля 2017, 17:05

Есть 3 таблицы, у каждой по одному столбцу и по 29 строк. Высота строк разная. Одна строка имеет несколько строчек текста, а другая всего одну. Нужно что бы все строки были одинаковый по высоты. К сожалению я не очень понимаю как это сделать. Саму верстку поменять нет возможности. Нужно с помощью JS решить данную задачку.

Я решил собрать высоту каждой строки в один массив. Потом разделить на количество столбцов и сделать три массива. А потом сверить их и по выбирать максимальные значения и накинуть их всем строкам по порядку.

var number = document.querySelectorAll('.new-table').length;
var arr = [];
var allArray = document.querySelectorAll('.new-table > table');
for (i = 0; i < allArray.length; i++) {
    arr.push(allArray[i].clientHeight);
}
console.log(arr);

Подскажите пожалуйста как лучше сделать или в каком направлении лучше пойти?

Answer 1

Пора изучать flex в css. Возможностей больше и js для подобных задач тут ни к чему (только если не нужна поддержка ie lt 9 и очень старых мозилл с операми). Нашел прекрасный пример на codepen: https://codepen.io/imohkay/pen/gpard

<div class="paddingBlock">
  <h1>EQUAL HEIGHT COLUMNS</h1>
  <p>Simply add display:flex to the parent</p>
  <div class="equalHWrap eqWrap">
    <div class="equalH eq">boo <br> boo</div>
    <div class="equalH eq">shoo</div>
    <div class="equalH eq">clue</div>
  </div>
</div>

И простой css:

.eqWrap {
  display: flex;
}
.eq {
  padding: 10px;
}
.eq:nth-of-type(odd) {
  background: yellow;
}
.eq:nth-of-type(even) {
  background: lightblue;
}