Я пытаюсь вложить таблицы в строку таблицы, сохраняя при этом внешний вид одной таблицы, как показано в примере ниже (таблица с одной строкой со значением данных и двумя вложенными таблицами, одна 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>
Теперь я знаю, что могу решить эту проблему, используя rowspan (и вот как яв настоящее время решает проблему), но для этого требуется заранее решить, какие строки выстроить в ряд, и это может привести к таким проблемам, как те, что генерируются приведенным ниже фрагментом, где было бы лучше, если бы я применил rowspan="2" к первой строке (вместо последней строки) таблицы с 2 строками:
td {
border: 1px solid black;
}
table {
border-collapse: collapse;
width: 500px;
}
<table cellpadding="5">
<tr><td rowspan="3">x</td>
<td>problem when you have some really long text in the first row</td><td>p</td><td>a</td><td>b</td><td>c</td></tr><tr><td rowspan="2">z</td><td rowspan="2">q</td><td>d</td><td>e</td><td>f</td></tr><tr><td>g</td><td>some other really long text</td><td>i</td>
</tr>
</table>
Я бы предпочел, чтобы приведенная выше таблица выглядела так:
Есть ли способ достичь того, чего я хочу, используя HTML / CSS?В таблице много строк, поэтому я бы предпочел, чтобы браузер перебрал их перед рендерингом.Однако, если это невозможно, я открыт для решения Javascript / JQuery.
Обновление
Хотя в то время я нашел работоспособное решение (см. Мой опубликованный ответС тех пор я сталкивался с некоторыми ситуациями, когда задание ширины столбцов заранее (даже в процентах) было затруднено из-за невозможности предвидеть все возможные данные для отображения.Поэтому я надеюсь найти ответ, который не зависит от этого.
Так как я не сделал это так ясно, как следовало бы, у меня есть несколько строк, в которые я хочу вложить таблицы,поддерживая согласованные высоты, а также ширину столбцов.Например, для двух строк я хотел бы иметь возможность создать макет следующим образом:
Где с необработанной таблицей HTML результат выглядит следующим образомэто:
.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 1</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>100</td><td>$20.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>
<tr><td>Customer 304</td>
<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>Item4</td><td>5</td><td>$6.00</td></tr></table></td>
<td class="d-subtable"><table class="subtable" cellpadding="0"><tr><td>20 Sep 2018</td><td>$4.00</td></tr><tr><td>27 Sep 2018</td><td>$26.00</td></tr></table></td>
</tr>
</table>