如果运行下面的示例,您将看到每行的单元格高度略有不同。即使内容不同,我也需要相同。
怎么样?我以为我已经通过使用height: 1.7em;
来设置它,但它似乎被忽略了。
#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>
你需要在td
中添加一个div并为它设置一个固定的height
,然后根据需要将溢出设置为auto
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>