I am trying to nest tables within a table row, while maintaining the appearance of a single table, as shown in the example below (a table with a single row with a data value and two nested tables, one 2x2 and the other 3x3) :
This is just an example; the actual table has significantly more rows and columns. I want to use tables because of the natural reflowing of column widths and row heights to fit the table data without having to worry about the container size (i.e. table width = 100%).
The problem I am having is that the tallest table sets the row height, but the other tables don't expand to fill that height, so the internal borders don't stretch from top to bottom as shown in the result of this snippet:
.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>
Now I know I can resolve this problem using rowspan (and that is how I am currently solving the problem) but that requires deciding in advance which rows to line up and that can lead to issues such as that generated by the below snippet, where it would clearly be better if I'd applied rowspan="2" to the first row (instead of the last row) of the table with 2 rows:
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>
I would prefer the above table to look like this:
Is there a way to achieve what I want using HTML/CSS? There are a lot of rows in the table so I'd prefer the browser sort it out before rendering. However if it's not possible I'm open to a Javascript/JQuery solution.
Update
Although I did find a workable solution at the time (see my posted answer) I have since encountered some situations where setting the widths of the columns in advance (even as percentages) was difficult owing to not being able to anticipate all the possible data to be displayed. So I'm hoping to find an answer that doesn't rely on doing that.
Since I didn't make it as clear as I should have, I have multiple rows in which I want to nest tables, keeping the heights matched as well as the column widths. For example, for two rows, I would like to be able to create a layout like this:
Where with raw table HTML the result looks like this:
.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>
