Same TD height for two tables displayed side by side - html

Question

I have created two table that are displaying side by side. In each table there are header sections and under each section there is data. The problem i am running into is aligning the header of each section side by side as some of the sections have less data than the other. Below is what I have tried so far with CSS and html but its not working. Hoping that someone can assist.
#customers {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: uncollapse;
}
#customers th {
broder: none;
}
#customers td {
broder: none;
min-height: 33%;
}
#customers tr:nth-child(even) {
background-color: #f2f2f2;
}
#customers th {
padding-top: 8px;
padding-bottom: 8px;
text-align: Center;
background-color: Gray;
color: white;
}
<table id="customers" style="display: inline-block; border: 15px solid; float: left; ">
<tr>
<th>Heading 1</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center" font='red'>Yes</td>
</tr>
<tr>
<td>Question2?</td>
<td align="center">N/A</td>
</tr>
<tr>
<td>Question3</td>
</tr>
<tr>
<th>Heading 2</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 2?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">N/A</td>
</tr>
<tr>
<th>Heading 3</th>
<th></th>
</tr>
<tr>
<td>Question 1</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question 2
</td>
<td>See Link
</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td>Direct Debit</td>
<td></td>
</tr>
<tr>
<th>Heading 4</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1></td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<td>Question1</td>
<td></td>
</tr>
<tr>
<th>Header 5</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<th>header 6</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question?</td>
<td align="center">N/A</td>
</tr>
<tr>
<th>HEader 7</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question
</td>
<td align="center">See Link
</td>
</tr>
<tr>
<td>Question
</td>
<td> </td>
</tr>
<tr></tr>
</table>
</div>
<table id="customers" style="display: inline-block; border: 15px solid; float: left; ">
<tr>
<th>Header 1</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<th>header 2</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question?</td>
<td align="center">N/A</td>
</tr>
<tr>
<th>HEader 3</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question
</td>
<td align="center">See Link
</td>
</tr>
<tr>
<td>Question
</td>
<td> </td>
</tr>
<tr></tr>
<tr>
<th>Header 4</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">No</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes*</td>
</tr>
<tr>
<td>Question</td>
<td align="center">N/A</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">*</td>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td>
<td>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<th>HEader 5</th>
<th></th>
</tr>
<tr>
<td>Question?</td>
<td align="center">IAS</td>
</tr>
<tr>
<th>Header 6</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<th>header 7</th>
<th></th>
</tr>
<tr>
<td>Question</td>
</tr>
</table>

Answer 1

Here's a version of the top three sections of your code with a table wrapped around the inner tables for structure. Setting vertical-align: top on the td's of the container table keeps the inner tables at the same vertical position even when one is taller than the next.
.even-heights {
font-size: 0;
background: black;
border: 7.5px solid;
border-collapse: collapse;
}
.even-heights td {
vertical-align: top;
}
.customers {
margin: 7.5px;
font-size: 16px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: uncollapse;
display: inline-block;
}
.customers th {
border: none;
}
.customers td {
border: none;
/* tr must have a height then... min-height: 33%; */
min-height: 18px;
min-width: 62px;
}
.customers tr:nth-child(even) {
background-color: #f2f2f2;
}
.customers tr:nth-child(odd) {
background-color: #fff;
}
.customers th {
padding-top: 8px;
padding-bottom: 8px;
text-align: Center;
background-color: Gray;
color: white;
}
<table class="even-heights">
<tr>
<td>
<table class="customers">
<tr>
<th>Heading 1</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center" font='red'>Yes</td>
</tr>
<tr>
<td>Question2?</td>
<td align="center">N/A</td>
</tr>
<tr>
<td>Question3</td>
<td> </td>
</tr>
</table>
</td>
<td>
<table class="customers">
<tr>
<th>Header 1</th>
<th></th>
</tr>
<tr>
<td>Question1</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="customers">
<tr>
<th>Heading 2</th>
<th></th>
</tr>
<tr>
<td>Question 1?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 2?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">USD</td>
</tr>
<tr>
<td>Question 3?</td>
<td align="center">N/A</td>
</tr>
</table>
</td>
<td>
<table class="customers">
<tr>
<th>header 2</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td></td>
</tr>
<tr>
<td>Question</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question?</td>
<td align="center">N/A</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table class="customers">
<tr>
<th>Heading 3</th>
<th></th>
</tr>
<tr>
<td>Question 1</td>
<td align="center">Yes</td>
</tr>
<tr>
<td>Question 2
</td>
<td>See Link
</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Direct Debit</td>
<td></td>
</tr>
</table>
</td>
<td>
<table class="customers">
<tr>
<th>HEader 3</th>
<th></th>
</tr>
<tr>
<td>Question</td>
<td> </td>
</tr>
<tr>
<td>Question
</td>
<td align="center">See Link
</td>
</tr>
<tr>
<td>Question
</td>
<td> </td>
</tr>
</table>
</td>
</tr>
</table>