0

Есть 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);

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

2
  • таблицы в теге table или div? нужен html-код таблицы для ясности
    – slippyk
    19 апр 2017 в 13:16
  • Вот несколько скринов - fex.net/982251703735 19 апр 2017 в 14:26

1 ответ 1

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;
}

Ваш ответ

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

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