line-height在表格中失效的根本原因是其仅控制文本行框高度，不约束图片、padding、border或换行内容；chrome/firefox对table单元格height支持差，需用height+line-height+vertical-align+padding:0+box-sizing:border-box锁死单行最小高度。
表格里 line-height 设了但行高还是被内容撑开
根本原因是 line-height 只管文本行框，不管图片、padding、border 或换行后的总高度。浏览器渲染表格时，<tr> 的 <code>height 属性在 Chrome 中基本被忽略，Firefox 行为也不一致，不能依赖。
实操建议：
- 把
line-height明确写在<td> 或 <code><th> 上，别写在 <code><tr> 里 <li>配合 <code>vertical-align: middle和box-sizing: border-box，否则文字上下偏移或内边距额外加高 - 清空默认
padding：padding: 0，否则哪怕line-height: 40px，padding-top: 8px也会让实际高度变成 56px - 加
border-collapse: collapse到<table>，避免分离模式下边框叠加导致高度浮动 <h3>单行数据表格怎么锁死最小行高为 40px</h3> <p>适合后台列表、订单项等纯文本、单行显示的场景。目标是视觉上严格等高，不随字体缩放或内容微调而变化。</p> <p>实操建议：</p> <ul> <li><code>td { height: 40px; line-height: 40px; vertical-align: middle; padding: 0; box-sizing: border-box; } - 必须用像素值（如
40px），无单位数字（如1.5）会随字号变化，无法“锁死” - 加
overflow: hidden防止超长文本或意外换行撑破高度 - 如果单元格含图标或小图，用
img { vertical-align: middle; }对齐，避免基线错位抬高整体
多行文本或动态内容怎么设最小行高又不截断
当单元格可能含换行、富文本、用户输入或响应式字体时，硬设 height 会直接截断或溢出。这时“最小行高”本质是“最低可读高度”，不是固定像素。
实操建议：
- 放弃
height，改用min-height: 48px（推荐 ≥ 字号 × 1.5 × 2 行） -
line-height仍设无单位值（如1.5），保证多行时自然堆叠且响应式 - 若需强制单行并截断，用
display: -webkit-box; -webkit-line-clamp: 2; overflow: hidden;，但注意 Safari/Chrome 兼容性 - React/Vue 动态渲染时，图片未加载完会导致高度跳变——给
img加min-height: 1em或用aspect-ratio占位
line-height 在表格里为什么写了没反应
不是语法错，而是被隐性规则压制。DevTools 里看 “Computed” 面板常发现真实值是 normal 或继承自父级，而非你写的值。
常见干扰点：
- 父级
font-size: 0（用于清除 inline 间隙）会让line-height: 1.5算出来是 0 —— 子td必须显式设font-size -
td里套了div或span，而line-height写在了外层td，但内部块级元素没继承（line-height不影响块级子元素的高度） - CSS 优先级被重置样式覆盖，比如
normalize.css里td { line-height: 1.15; }比你写的1.5更具体 - 用了
display: flex或grid包裹单元格内容 ——line-height在非文本流布局中失效
最稳的调试方式：右键检查元素 → 切到 “Computed” 标签页，直接看 line-height 最终值是多少、被哪条规则覆盖。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
