设置了固定的td单元格高度后，如何在CSS中设置它，但不能兑现？

Question

If you run the example below you will see that the cell height is slightly different in each row. I need to have it be the same even if the contents is different.

How? I thought I am already setting it by using height: 1.7em; , but it seems to be ignored.

 #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> 

Answer 1

You need to add a div inside the td and set a fixed height to it, and set the overflow to be auto as you want

 td { border: 1px solid #000; } td > div { height: 1.7em; overflow: auto; } 

 <table> <tr> <td> <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam, fugiat delectus explicabo natus tempore, officiis quas in eius dolore cumque non iste eveniet necessitatibus, inventore odio cupiditate consequuntur quis mollitia. </div> </td> </tr> </table>