最干净可复用的动态表格行高方案是用--table-row-height css变量+tr的height声明；硬编码tr.style.height会覆盖层叠、新增行易遗漏、无法联动字体大小，且需手动清理旧值。
直接用 --table-row-height CSS 变量 + tr 的 height 声明，是最干净、可复用的动态方案。硬编码 tr.style.height 或反复操作内联样式会破坏主题响应、难以统一维护。
为什么不能直接改 tr.style.height？
JS 直接写 tr.style.height = '48px' 看似简单，但实际埋了三个坑：
- 它覆盖所有 CSS 层叠（包括媒体查询、暗色模式类、第三方主题），切换主题后行高就失效
- 每行都要单独遍历设置，表格重渲染或新增行时容易漏掉，还得手动清理旧值
- 无法和字体大小联动（比如希望行高始终是
font-size × 1.5），逻辑散落在 JS 里，后期难调试
--table-row-height 变量怎么定义和使用？
变量必须定义在 :root，且 tr 要显式声明 height: var(--table-row-height) —— 注意不是 line-height，因为表格行高靠的是 height 属性生效。
示例：
/* CSS */
:root {
--table-row-height: 40px;
}
table tr {
height: var(--table-row-height);
}
/* 单元格内容居中，避免文字贴顶 */
td, th {
vertical-align: middle;
padding: 0;
}
这样所有 <tr> 就自动继承变量值，改一处，全局响应。<h3>如何用 JS 动态更新并持久化？</h3>
<p>必须调用 <code>document.documentElement.style.setProperty()，而不是 document.body —— 后者改了变量根本不起作用。
实操要点：
- 输入校验：防止设成
0或负值导致内容不可见，例如value = Math.max(24, Math.min(80, Number(value))) - 持久化：存到
localStorage，页面加载时先读取再 setProperty，避免刷新回退 - 触发时机：建议在用户松开滑块（
change）而非拖动中（input）更新，减少重排压力
示例代码：
const slider = document.getElementById('row-height-slider');
const saved = localStorage.getItem('table-row-height') || '40';
document.documentElement.style.setProperty('--table-row-height', saved + 'px');
<p>slider.value = saved;
slider.addEventListener('change', () => {
const val = Math.max(24, Math.min(80, Number(slider.value)));
document.documentElement.style.setProperty('--table-row-height', val + 'px');
localStorage.setItem('table-row-height', val.toString());
});</p>
兼容性和隐藏坑要注意什么？
IE 不支持 CSS 变量，但现代项目基本已不需兼容；真正容易被忽略的是两点：
-
table-layout: fixed会强制列宽，但若同时设了tr height，某些浏览器（如 Safari）可能忽略高度，需配合td { vertical-align: top }显式对齐 - WebFont 加载完成前，后备字体的度量值不同，
height固定但文字实际占用空间可能溢出，建议加overflow: hidden或用min-height替代纯height防止裁切
变量名别起成 --height 这种泛义名，容易和布局系统其他变量冲突，推荐带上下文，比如 --data-table-row-height。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
