在 HTML table 中精确控制行高

Question

对于 HTML table，我发现如果我设置

table{
    table-layout: fixed;
    width: 0;
}

然后我可以在 col 元素中指定每列的宽度，它们将得到尊重，即单元格不能增加列的宽度，而是必须处理溢出。

有没有办法对行高做同样的事情？我想做的是能够在每个 tr 元素中指定行高，然后单个单元格不能让它更高，如果它们的内容想要更大，它们只需要处理垂直溢出。

Answer 1

只需将 line-height:nPX 添加到每个 td。在我的示例中，我截断了长文本以提高可读性。

table {
  table-layout: fixed;
  width: 200px; 
}

table td {
   line-height: 12px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;  
}

<table border="1">
  <tr>
    <td> 1 Lorem ipsum</td>
    <td>Lorem ipsum Lorem ipsum Lorem ipsum</td>
  </tr>
  <tr>
    <td>2 Lorem ipsum</td>
    <td>Lorem ipsum Lorem ipsum Lorem ipsum</td>
  </tr>  
</table>

在 HTML table 中精确控制行高

Controlling row heights precisely in an HTML table

html

css

html-table