tr标签高度无法通过height属性直接生效，因其height仅作为行高分配的参考值，实际高度由内容、所在行最高单元格及table-layout模式共同决定；需配合table-layout: fixed和显式列宽控制才能稳定生效。
细长比例的单元格（比如高度远大于宽度，或宽度极窄而高度固定）不能靠 width 和 height 属性硬塞出来——浏览器会按表格布局算法自动重算，尤其在内容撑开、字体换行、默认 table-layout: auto 下，你设的值大概率被忽略。
用 table-layout: fixed 锁定列宽行为
这是最关键的一步。默认 table-layout: auto 会让浏览器遍历所有单元格内容再决定列宽，导致你设的窄宽（如 width: 20px）完全无效；换成 fixed 后，列宽只看第一行 <td> 或 <code><col> 的声明，后续单元格不再影响宽度分配。
- 必须给
<table> 显式设置 <code>width（百分比或像素），否则fixed不生效 - 推荐用
<col>标签定义每列宽度，比在每个<td> 上重复写 <code>style="width:..."更可靠 - 如果某列内容超长且不想换行，加
white-space: nowrap；想强制截断，加overflow: hidden; text-overflow: ellipsis
| A | B | C |
height 在 <td> 上为什么经常不生效<p><code><td> 的 <code>height 只能作为该单元格所在行的最小高度参考，真正起作用的是整行的 height（来自 <tr> 或该行最高单元格）。如果你只想让某个单元格“看起来细长”，实际要控制的是行高 + 单元格内边距 + 内容排版。<ul><li>直接给 <code><tr> 设 <code>height（如 height: 80px），比给每个 <td> 设更稳定<li>配合 <code>vertical-align: top 或 middle 控制内容在单元格内的垂直位置
line-height 等于行高来居中；若内容多行，height 需留足空间，否则会溢出或被裁剪避免 cellspacing 和 cellpadding 干扰视觉比例
这两个 HTML 属性会悄悄改变单元格实际占用空间：旧式写法 cellspacing="1" 会在单元格之间插入 1px 间隙，看起来像边框变粗、列宽被“吃掉”；cellpadding 则增加内边距，让窄列显得更宽。
- 现代写法应完全弃用
cellspacing和cellpadding，改用 CSS：border-collapse: collapse消除间隙，padding精确控制内边距 - 细长单元格尤其敏感：比如你设了
width: 30px，但cellpadding="5"会让内容区域只剩 20px，文字可能直接溢出 - 检查是否意外继承了全局
td { padding: 8px }—— 这种规则会让所有单元格变“胖”
真正做细长单元格时，最常被忽略的是 table-layout 和 border-collapse 的组合效果：没设 fixed，再窄的 width 也白搭；没关 border-collapse，间隙会吃掉你精心计算的像素。这两项不配对调，其他样式都是在修边角。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
