Две вложенные таблицы одинаковой высоты

#html #css #html5 #css3

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



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

  

    

      

          

            

                
FJIREHT943TH0-34934943-435N8Y3Y34Y3Y4
                
...
            
            

                
...
                
...
            
            

                
...
                
...
            
          
      
      

          

            

                

            
            

                
Some
            
            

                
bnbkj
            
          
      
    
  





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

Ответы

Ответ 1

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


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


Ответ 2

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

Описание решения:
 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.


Ответ 3

Задайте всем ячейкам таблицы и вложенным таблицам 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;
}


Ответ 4

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

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

Код нужен?