Stretch table to vertically fit TD - html

Question

I am placing a table inside a td. By setting width:100%, I can get the table to stretch horizontally, but I have not been able to do the same vertically. No matter what I've tried, the table will have the minimum height necessary to contain its contents.
Below is the structure of the table
table {
border-collapse: collapse;
border-spacing: 2px;
border-color: black;
}
td {
border: 1px solid #ddd;
background: #f2f5f7;
}
<table >
<tbody>
<tr>
<td rowspan="2" style="background-color:#ff0000"/>
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>D</td>
</tr>
</table>
<td><br>Extra<br></td>
</tr>
<tr>
<td>Space<br><br></td>
</tr>
</table>
I am trying to get rid of the red areas above and below the ABCD table. I've tried solutions from dozens of various questions, and I thought this would be straightfoward, but nothing has worked.
I have tried (in various permutations):
height:100% on any and all componentns
display:flex or display:block on the nested table and/or parent td
explicitly setting padding:0px !important on all components
None of these have affected the height of the table.
The most promising result so far: setting the height to a pixel value (like height:100px does change the height of the table. Unfortunately, the necessary height of the table will change based on factors outside of my knowledge/control. I'm looking for a programmatic solution to this issue.
(NOTE: I know how to use JS to grab the height of the neighboring cells and set the height of the trs in the nested table after the page loads. However, I don't have a guarantee that JS will be executable, so this is my last resort.)

Answer 1

Here is a solution that I've created using CSS Grid.
.grid-table {
display: grid;
grid-template-columns: repeat(3, minmax(50px, 1fr));
background-color: #fff;
color: #444;
max-width: 800px;
background-color: #ccc;
}
.grid-table > .row:not(:last-of-type) {
border-bottom: 1px solid #ddd
}
.row {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(50px, 1fr));
align-items: center;
}
.row > .box:not(:last-of-type) {
border-right: 1px solid #ddd;
}
.box {
height: 100%;
display: flex;
align-items: center;
}
.box-item {
padding: 5px;
}
<div class="grid-table">
<!-- Table Row -->
<div class="row">
<div class="box">
<div class="box-item">Column 1</div>
</div>
<div class="box">
<div class="box-item">Column 2</div>
</div>
<div class="box">
<div class="box-item">Column 3</div>
</div>
</div>
<!-- Table Row -->
<div class="row">
<div class="box">
<div class="box-item">A</div>
</div>
<div class="box">
<div class="box-item">B</div>
</div>
<div class="box">
<div class="box-item">Extra<br>Space</div>
</div>
</div>
<!-- Table Row -->
<div class="row">
<div class="box">
<div class="box-item">C</div>
</div>
<div class="box">
<div class="box-item">D</div>
</div>
<div class="box">
<div class="box-item">Extra<br>Space</div>
</div>
</div>
</div>
With this solution, the height of the individual columns will always be the height of the tallest column. You can control whether you want the rows to be centered or not by modifying the align-items attribute within the .box class.
JSFiddle