HTML表格单元格设5px高度不生效，如何缩小至10px以下？

尝试在HTML表格的<th>标签中通过style属性设置height:5px，期望将单元格高度缩小至10px以下，但设置后并未生效。相关代码如下：

<table>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount1</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Amount2</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid black; border-color: #96D4D4; height:5px">Total</th>
    <td style="border: 1px solid black; border-color: #96D4D4;">100</td>
  </tr>
</table>

解决方法 #

浏览器默认的内边距（padding）、行高（line-height）和字体大小会限制单元格的最小高度，只设置height无法生效，需要同时调整这些属性：

• 给<th>设置padding:0，清除默认内边距
• 设置line-height等于或小于目标高度，比如line-height:5px
• 若不需要显示文字或文字极小，可设置font-size:0，避免字体高度占用空间
• 给<table>添加border-collapse:collapse，消除边框之间的间距影响高度

修改后的代码示例：

<table style="border-collapse: collapse;">
  <tr>
    <th style="border: 1px solid #96D4D4; height:5px; padding:0; line-height:5px; font-size:0;">Amount1</th>
    <td style="border: 1px solid #96D4D4; padding:0; line-height:5px; font-size:0;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid #96D4D4; height:5px; padding:0; line-height:5px; font-size:0;">Amount2</th>
    <td style="border: 1px solid #96D4D4; padding:0; line-height:5px; font-size:0;">50</td>
  </tr>
  <tr>
    <th style="border: 1px solid #96D4D4; height:5px; padding:0; line-height:5px; font-size:0;">Total</th>
    <td style="border: 1px solid #96D4D4; padding:0; line-height:5px; font-size:0;">100</td>
  </tr>
</table>

如果需要保留文字显示，可调整font-size为合适的小尺寸（比如font-size:8px），同时对应调整line-height以适配。

内容的提问来源于stack exchange，提问作者Jim Macaulay