Я пытаюсь вложить таблицы в строку таблицы, сохраняя при этом внешний вид одной таблицы, как показано в примере ниже (таблица с одной строкой со значением данных и двумя вложенными таблицами, одна 2x2 и другая 3x3):
Это всего лишь пример; фактическая таблица имеет значительно больше строк и столбцов. Я хочу использовать таблицы из-за естественного переопределения ширины столбца и высоты строки, чтобы соответствовать данным таблицы, не беспокоясь о размере контейнера (то есть ширина таблицы = 100%).
У меня проблема в том, что самая высокая таблица устанавливает высоту строки, но другие таблицы не расширяются, чтобы заполнить эту высоту, поэтому внутренние границы не растягиваются сверху вниз, как показано в результате этого фрагмента:
.display {
border-collapse: collapse;
}
.display, .display td, .display th {
border: 1px solid black;
}
.subtable {
border-collapse: collapse;
}
.subtable td {
border-top: 0;
border-bottom: 1px solid black;
border-left: 0;
border-right: 1px solid black;
}
.subtable tr td:last-of-type {
border-top: 0;
border-bottom: 1px solid black;
border-left: 0;
border-right: 0;
}
.subtable tr:last-of-type td {
border-top: 0;
border-bottom: 0;
border-left: 0;
border-right: 1px solid black;
}
.subtable tr:last-of-type td:last-of-type {
border: 0;
}
td {
padding: 5px;
}
td.d-subtable {
padding: 0;
}<table class="display" cellpadding="0">
<tr><th>Customer</th><th>Items</th><th>Payments</th></tr>
<tr><td>Customer Name</td>
<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>Item1</td><td>5</td><td>$400.00</td></tr><tr><td>Item2</td><td>10</td><td>$200.00</td></tr><tr><td>Item3</td><td>2</td><td>$500.00</td></tr></table></td>
<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>12 Sep 2018</td><td>$3,000.00</td></tr><tr><td>18 Sep 2018</td><td>$2,000.00</td></tr></table></td>
</tr>
</table>
