Table cells are not the same height within row - html

Question

I am creating a table in html. Every table cell needs to be exactly the same height. When I put a div in the table cell the height is not the same between table cells in the row. The table cells that contain text are 61.6px tall while the table cells that contain divs are 61.2px tall. I am using Google Chrome and that is the only browser I need the table cells to be an even height for. How do I ensure all the table cells are the same height?
A pure CSS solution is preferred but a javascript solution is acceptable.
table {
border-collapse: collapse;
width: 600px;
}
tbody {
border: 1px solid black;
}
th {
padding: 0 6px;
text-align: center;
background: black;
color: white;
}
tr td {
background: darkgray;
}
tr:nth-child(even) td {
background: gray;
}
td.small {
font-size: 9px;
}
td.large {
font-size: 18px;
}
td {
padding: 6px;
border-color: black;
border-width: 0 1px;
border-style: solid;
height: 18px;
}
.evilobject {
height: 50px;
background: red;
}
<table>
<tbody>
<tr>
<th>Large Font</th>
<th>Small Font</th>
<th>Contains Div</th>
</tr>
<tr>
<td class="large">What the font!?</td>
<td class="small">What the font!?</td>
<td class="small"><div class="evilobject">Evil div object</div></td>
</tr>
<tr>
<td class="large">What the font!?</td>
<td class="small">What the font!?</td>
<td class="small"><div class="evilobject">Evil div object</div></td>
</tr>
<tr>
<td class="large">What the font!?</td>
<td class="small">What the font!?</td>
<td class="small"><div class="evilobject">Evil div object</div></td>
</tr>
</tbody>
</table>

Answer 1

Use tr instead of td and use universal selector`
*{
box-sizing: border-box;
padding: 0;
margin: 0;
}
table {
border-collapse: collapse;
width: 600px;
}
tbody {
border: 1px solid black;
}
th {
padding: 0 6px;
text-align: center;
background: black;
color: white;
}
tr td {
background: darkgray;
}
tr:nth-child(even) td {
background: gray;
}
td.small {
font-size: 9px;
}
td.large {
font-size: 18px;
}
tr{
padding: 6px;
border-color: black;
border-width: 0 1px;
border-style: solid;
height: 18px;
}
.evilobject {
height: 50px;
background: red;
}
<table >
<tbody>
<tr>
<th>Large Font</th>
<th>Small Font</th>
<th>Contains Div</th>
</tr>
<tr>
<td class="large">What the font!?</td>
<td class="small">What the font!?</td>
<td class="small"><div class="evilobject">Evil div object</div></td>
</tr>
<tr>
<td class="large">What the font!?</td>
<td class="small">What the font!?</td>
<td class="small"><div class="evilobject">Evil div object</div></td>
</tr>
<tr>
<td class="large">What the font!?</td>
<td class="small">What the font!?</td>
<td class="small"><div class="evilobject">Evil div object</div></td>
</tr>
</tbody>
</table>
`