title: Matching table height for nested HTML tables
body: <p>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) :</p>
  
  <p><a href="https://i.stack.imgur.com/aJIRk.png" rel="noreferrer"><img src="https://i.stack.imgur.com/aJIRk.png" alt="enter image description here"></a></p>
  
  <p>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%).</p>
  
  <p>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:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="display" cellpadding="0"&gt;
   &lt;tr&gt;&lt;th&gt;Customer&lt;/th&gt;&lt;th&gt;Items&lt;/th&gt;&lt;th&gt;Payments&lt;/th&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;Customer Name&lt;/td&gt;
    &lt;td class="d-subtable"&gt;&lt;table class="subtable" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;Item1&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;$400.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Item2&lt;/td&gt;&lt;td&gt;10&lt;/td&gt;&lt;td&gt;$200.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Item3&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;$500.00&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
    &lt;td class="d-subtable"&gt;&lt;table class="subtable" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;12 Sep 2018&lt;/td&gt;&lt;td&gt;$3,000.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;18 Sep 2018&lt;/td&gt;&lt;td&gt;$2,000.00&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/cWik3.png" rel="noreferrer"><img src="https://i.stack.imgur.com/cWik3.png" alt="enter image description here"></a></p>
  
  <p>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 <code>rowspan="2"</code> to the first row (instead of the last row) of the table with 2 rows:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>td {
    border: 1px solid black;
  }
  
  table {
    border-collapse: collapse;
    width: 500px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table cellpadding="5"&gt;
   &lt;tr&gt;&lt;td rowspan="3"&gt;x&lt;/td&gt;
    &lt;td&gt;problem when you have some really long text in the first row&lt;/td&gt;&lt;td&gt;p&lt;/td&gt;&lt;td&gt;a&lt;/td&gt;&lt;td&gt;b&lt;/td&gt;&lt;td&gt;c&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td rowspan="2"&gt;z&lt;/td&gt;&lt;td rowspan="2"&gt;q&lt;/td&gt;&lt;td&gt;d&lt;/td&gt;&lt;td&gt;e&lt;/td&gt;&lt;td&gt;f&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;g&lt;/td&gt;&lt;td&gt;some other really long text&lt;/td&gt;&lt;td&gt;i&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/B6Cxb.png" rel="noreferrer"><img src="https://i.stack.imgur.com/B6Cxb.png" alt="enter image description here"></a></p>
  
  <p>I would prefer the above table to look like this:</p>
  
  <p><a href="https://i.stack.imgur.com/8dcGF.png" rel="noreferrer"><img src="https://i.stack.imgur.com/8dcGF.png" alt="enter image description here"></a></p>
  
  <p>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.</p>
  
  <p><strong>Update</strong></p>
  
  <p>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.</p>
  
  <p>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:</p>
  
  <p><a href="https://i.stack.imgur.com/JTGHl.png" rel="noreferrer"><img src="https://i.stack.imgur.com/JTGHl.png" alt="enter image description here"></a></p>
  
  <p>Where with raw table HTML the result looks like this:</p>
  
  <p><a href="https://i.stack.imgur.com/KAl4J.png" rel="noreferrer"><img src="https://i.stack.imgur.com/KAl4J.png" alt="enter image description here"></a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
  <div class="snippet-code snippet-currently-hidden">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>  .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;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table class="display" cellpadding="0"&gt;
   &lt;tr&gt;&lt;th&gt;Customer&lt;/th&gt;&lt;th&gt;Items&lt;/th&gt;&lt;th&gt;Payments&lt;/th&gt;&lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;Customer 1&lt;/td&gt;
    &lt;td class="d-subtable"&gt;&lt;table class="subtable" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;Item1&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;$400.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Item2&lt;/td&gt;&lt;td&gt;100&lt;/td&gt;&lt;td&gt;$20.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;Item3&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;$500.00&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
    &lt;td class="d-subtable"&gt;&lt;table class="subtable" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;12 Sep 2018&lt;/td&gt;&lt;td&gt;$3,000.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;18 Sep 2018&lt;/td&gt;&lt;td&gt;$2,000.00&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
   &lt;/tr&gt;
   &lt;tr&gt;&lt;td&gt;Customer 304&lt;/td&gt;
    &lt;td class="d-subtable"&gt;&lt;table class="subtable" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;Item4&lt;/td&gt;&lt;td&gt;5&lt;/td&gt;&lt;td&gt;$6.00&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
    &lt;td class="d-subtable"&gt;&lt;table class="subtable" cellpadding="0"&gt;&lt;tr&gt;&lt;td&gt;20 Sep 2018&lt;/td&gt;&lt;td&gt;$4.00&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;27 Sep 2018&lt;/td&gt;&lt;td&gt;$26.00&lt;/td&gt;&lt;/tr&gt;&lt;/table&gt;&lt;/td&gt;
   &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>