【发布时间】：2019-03-01 02:46:50
【问题描述】：
我正在尝试将表格嵌套在表格行中，同时保持单个表格的外观，如下面的示例所示（一个带有数据值的单行表格和两个嵌套表格，一个 2x2，另一个3x3) :
这只是一个例子；实际表有更多的行和列。我想使用表格，因为列宽和行高的自然重排以适应表格数据，而不必担心容器大小（即表格宽度 = 100%）。
我遇到的问题是最高的表设置了行高，但其他表没有扩展以填充该高度，因此内部边框不会从上到下延伸，如结果所示sn-p：
.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 解决这个问题（这就是我目前解决问题的方法），但这需要提前决定要排列哪些行，这可能会导致诸如以下 sn 产生的问题-p，如果我将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>【问题讨论】：
-
您的格式似乎没有显示数据表。相反，您似乎只想在某种自定义网格中可视化数据。如果它在语义上不是表格，我不建议使用
<table>来尝试解决此问题。 -
@zzzzBov 我确实有一个数据表。列和行比我在示例中显示的要多得多；我只是想创建一个演示我遇到的问题的最小示例。我想使用表格，因为它能够重排列宽和行高以使数据适合容器。
-
我认为更适合您的情况的解决方案是使用 CSS Grid 而不是表格。它会给你更多的控制权。
标签： javascript jquery html css html-table