Upon running the example below, you may notice that the height of the cells varies slightly in each row. Ensuring uniform cell height despite different content is a requirement.
Despite setting height: 1.7em;, it appears to be disregarded. How can this be rectified?
#cert_legend {
border-collapse: collapse;
margin-bottom: 30px;
}
#cert_legend th, #cert_legend td {
border: 1px solid #000;
border-collapse: collapse;
font-size: 8pt;
padding: 2px;
overflow: auto;
height: 1.7em;
max-height: 1.7em;
}
#cert_legend tr>th {
text-align: center;
}
.cert_description {
max-width: 200px;
}<table id="cert_legend">
<tbody>
<tr>
<th colspan="4">Test Variable Legend</th>
</tr>
<tr>
<td class="cert_title">time</td>
<td class="cert_description">Minutes elapsed</td>
<td class="cert_title">DPDsn</td>
<td class="cert_description">Tested differential pressure vs duty point at design RPM</td>
</tr>
<tr>
<td class="cert_title">tw</td>
<td class="cert_description">Water temperature</td>
<td class="cert_title">Torque</td>
<td class="cert_description">Pump torque</td>
</tr>
<tr>
<td class="cert_title">pfin</td>
<td class="cert_description">Feed pressure in. This is a relative reading to tank pressure</td>
<td class="cert_title">Eff</td>
<td class="cert_description">Pump Efficiency</td>
</tr>
</tbody>
</table>