Проблемы вёрстки. Есть таблица - контейнер. У неё одна единственная строчка, в которой содержится две ячейки. В каждой ячейке ещё по таблице. Вопрос: как сделать так, чтобы высота одной таблицы вычислялась в зависимости/так же как и высота другой.
.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 могло работать. С высотой заранее не угадаешь. Проблема в том, что если в одной таблице высота строк растягивается в зависимости от содержимого, в другой этого не происходит, и она становится меньше первой, хотя в идеале требуется, чтобы они воспринимались как одна общая таблица. Можно ли как-то разрешить эту проблему?
.inner_table
была одинаковой вне зависимости от содержимого? Другими словами, вы хотите выровнять именно внутренние таблицы?div
:<div style="width: 100%; height: inherit;">
- он необходим? похоже, что именно он источник проблемline-height
??? Автор, пожалуйста, уточните.