3

Проблемы вёрстки. Есть таблица - контейнер. У неё одна единственная строчка, в которой содержится две ячейки. В каждой ячейке ещё по таблице. Вопрос: как сделать так, чтобы высота одной таблицы вычислялась в зависимости/так же как и высота другой.

.table_container {
  border: none;
  outline: none;
  border-collapse: collapse; /* Убираем двойные линии между ячейками */
  margin: 5px 15px;
  padding: 0;
  color: rgba(86,100,115,1);
  table-layout: fixed;
  height: 100%;
}
.table_container td {
  border: none;
  outline: none;
  margin: 0;
  padding: 0;
}
.table_container .inner_table {
  height: 90%;
  border: none;
  outline: none;
  border-collapse: collapse; /* Убираем двойные линии между ячейками */
  table-layout: fixed;
}
.table_container .inner_table td {
  border: none;
  outline: none;
  padding: 5px;
  border: 2px solid rgba(86,100,115,1);
  overflow: hidden;
}
.table_container .inner_table th {
  padding: 10px;
  border: 2px solid rgba(86,100,115,1);
}
.table_container .inner_table th p {
  margin: 0;
  padding: 0;
}
<div class="matrioshka-tables">
  <table class="table_container">
    <tr>
      <td style="vertical-align: middle;">
          <table class="inner_table" style="width: 650px; height: inherit;">
            <tr>
                <td>FJIREHT943TH0-34934943-435N8Y3Y34Y3Y4</td>
                <td>...</td>
            </tr>
            <tr>
                <td>...</td>
                <td>...</td>
            </tr>
            <tr>
                <td>...</td>
                <td>...</td>
            </tr>
          </table>
      </td>
      <td style="vertical-align: middle;">
          <table class="inner_table" style="width: 190px; height: inherit;">
            <tr>
                <th></th>
            </tr>
            <tr>
                <td>Some</td>
            </tr>
            <tr>
                <td>bnbkj</td>
            </tr>
          </table>
      </td>
    </tr>
  </table>
</div>

Во внутренних таблицах все ячейки строго заданной ширины для того, чтобы свойство table-layout: fixed могло работать. С высотой заранее не угадаешь. Проблема в том, что если в одной таблице высота строк растягивается в зависимости от содержимого, в другой этого не происходит, и она становится меньше первой, хотя в идеале требуется, чтобы они воспринимались как одна общая таблица. Можно ли как-то разрешить эту проблему?

12
  • Правильно ли я понимаю, что Вам надо, чтобы высота обеих .inner_table была одинаковой вне зависимости от содержимого? Другими словами, вы хотите выровнять именно внутренние таблицы?
    – cyadvert
    14 окт 2015 в 12:48
  • И еще вопрос: вот этот div: <div style="width: 100%; height: inherit;"> - он необходим? похоже, что именно он источник проблем
    – cyadvert
    14 окт 2015 в 12:49
  • @cyadvert, я понял, что он хочет синхронизировать высоту строк внутренних таблиц, а не высоту самих внутренних таблиц.
    – Qwertiy
    14 окт 2015 в 12:58
  • Высоту строк? line-height??? Автор, пожалуйста, уточните.
    – cyadvert
    14 окт 2015 в 13:07
  • 1
    Давайте продолжим обсуждение в чате.
    – cyadvert
    14 окт 2015 в 14:03

4 ответа 4

3

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

Тогда и надо сделать одну таблицу. Зачем мудрить-то?

2
  • раз есть две таблицы, значит это было сделано по практической необходимости.
    – neo
    14 окт 2015 в 12:46
  • 1
    @neo, meta.ru.stackoverflow.com/q/709/178988
    – Qwertiy
    14 окт 2015 в 12:57
2
+50

Задание:
есть две таблицы с одинаковым количеством строк. Таблицы расположены рядом друг с другом, но высота строк разная.
Задача, выровнять высоты строк так, чтобы две таблицы выглядели как одна.

Описание решения:
1. сверяем высоты таблиц и выясняем, которая выше
2. для каждой строки большей таблицы выясняем высоту
3. присваиваем эту высоту соответствующей строкe второй таблицы

Также потребуются небольшие изменения в CSS: для правильного подсчета сделать бордюр border-box.

Решение:
CSS:

.table_container .inner_table td {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

JS:

function evenTables() {
    var fstTable = $('.inner_table').eq(0); // первая таблица
    var secTable = $('.inner_table').eq(1); // вторая таблица
    // сравниваем высоты таблиц и определяем 'из' и 'в' таблицы
    if (fstTable.height()>secTable.height()) {
        var source = fstTable;
        var dest = secTable;
    } else {
        var source = secTable;
        var dest = fstTable;
    }
    // прокручиваем через все строчки таблицы 'из'
    // выясняем высоты первых ячеек каждой строки
    // присваиваем выясненное значение первым ячейкам соответствующих строк таблицы 'в'
    source.find('tr>td:first-child').each(function(ind, el) {
        setHeight = $(el).outerHeight(true);
        dest.find('tr:nth-child(' + (ind+1) + ')>td:first-child').outerHeight(setHeight);
    });
});
evenTables();

Решение было проверено на Chrome, FF, Opera, IE.

4
  • огромное спасибо за предложенное решение, обязательно попробую!
    – neo
    16 окт 2015 в 15:43
  • @neo, а если сравнить его с набором поставленных тобою тегов?
    – Qwertiy
    16 окт 2015 в 18:30
  • @cyadvert, каким образом можно расширить это решение на обработку не только тега td, но и th?
    – neo
    20 окт 2015 в 11:18
  • А в чем проблема? Поставить вместо td - th внутри .find()
    – cyadvert
    20 окт 2015 в 12:27
0

Задайте всем ячейкам таблицы и вложенным таблицам height: 100%;:

.table_container td {
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
}
.table_container .inner_table {
  height: 100%;
  border: none;
  outline: none;
  border-collapse: collapse;
  /* Убираем двойные линии между ячейками */
  table-layout: fixed;
}
3
  • И у вас здесь <table class="inner_table" style="width: 950px; height: inherit;> кавычки не хватает 14 окт 2015 в 10:18
  • не помогло((((((((
    – neo
    16 окт 2015 в 15:41
  • Я уже поняла, что вам нужно не только таблицы одинаковой высоты, а еще и ячейки, чтобы совпадали, а это уже только js. 17 окт 2015 в 7:17
0

Если не использовать javascript, то можно пойти по пути наследования классов используя свойство inherit - наследование от родительского элемента, но я не уверен на все сто процентов, что это сработает.

А с помощью javascript'a можно брать айди обоих таблиц, сравнивать их значения характеристик высоты и айди с меньшим значением назначать значение большего айди. Простенькая if-else конструкция.

Код нужен?

3
  • пробовала через наследование - не сработало.
    – neo
    16 окт 2015 в 15:25
  • А !important если добавить? 16 окт 2015 в 15:29
  • Да не выйдет же. Динамическая высота. Либо одна таблица, либо скрипты.
    – Qwertiy
    16 окт 2015 в 18:31

Ваш ответ

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

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