当前位置：首页 > 前端开发 > 正文

如何设置HTML表格行高？

在HTML中设置表格行高，使用CSS的 height属性作用于` 或 元素，直接通过内联样式（如 ）或外部CSS定义（如tr { height: 40px; }`）实现，精确控制行高提升表格可读性。

为什么需要调整表格行高？

合理的表格行高设置直接影响用户体验：

如何设置HTML表格行高？第1张

研究显示：合适的行高可使阅读效率提升 20%（Nielsen Norman Group研究数据）

控制文本行的垂直间距（推荐单位：无单位数值或em）：

<style>
tr { line-height: 1.8; } /* 1.8倍字号 */
</style>

8倍行高示例

文本自然呼吸空间

如何设置HTML表格行高？第2张

<div class="method">
  <h3>2. height / min-height 属性</h3>
  <p>精确控制行容器高度（响应式优先使用min-height）：</p>
  <pre>&lt;style&gt;

tr { min-height: 50px; }
/ 固定高度 /
tr.fixed { height: 40px; }
</style>

最小高度50px

内容超长自动扩展

如何设置HTML表格行高？第3张

<div class="method">
  <h3>3. 内联样式（特殊场景使用）</h3>
  <p>为特定行快速设置样式：</p>
  <pre>&lt;tr style="line-height: 2.2em;"&gt;

<td>重要数据行</td>
</tr>