表格层级感靠视觉权重分配实现，需四步：边框合并（border-collapse: collapse）、斑马纹（tbody tr:nth-child(even)）、表头固定（position: sticky + z-index + background-clip）、悬停浮起（transform + box-shadow）。
表格的“层级感”不是靠 z-index 堆叠出来的，而是靠视觉权重分配——边框合并、背景渐变、悬停浮起、表头固定这四步做对了，用户自然觉得“有层次”。
border-collapse: collapse 是层级控制的第一道门槛
浏览器默认用 border-collapse: separate，每个 th 和 td 都自带 2px border-spacing，结果是：表头边框、单元格边框、table 外框三者互不统属，视觉上“平铺一整片”，毫无主次。
- 必须写
table { border-collapse: collapse; }，这是所有后续层级设计的前提 - 如果误设成
border-collapse: separate又没清border-spacing，移动端容易横向溢出 -
border-collapse只作用于table元素，对th/td单独设border才真正定义“哪条线该突出”
tbody tr:nth-child(even) 才能精准制造视觉节奏
很多人写 tr:nth-child(even)，结果第一行数据就变色——因为 thead 里的 tr 被算进计数了。表头不该参与斑马纹逻辑，否则节奏错位，用户扫读时会卡顿。
- 正确选择器是
tbody tr:nth-child(even)，把thead和tfoot显式排除在外 - 颜色别用纯灰：
#f9f9f9比#f0f0f0更柔和，OLED 屏上不刺眼 - 如果表格支持 JS 动态插入行（如分页加载），
:nth-child依然有效；:nth-of-type可能漏掉某些tr（比如中间插了注释节点）
position: sticky 实现表头固定时，z-index 和 background-clip 缺一不可
给 thead th 加 position: sticky; top: 0 后，滚动时经常出现：表头背景被遮住、边框断开、文字发虚——这不是 bug，是渲染层叠顺序没理清。
- 必须设
z-index: 2（不能是 1），否则可能被父容器的overflow: hidden截断 - 加
background-clip: padding-box，防止背景色溢出到边框区域，让border清晰可见 - 若用半透明背景（如
rgba(255,255,255,0.9)），务必补backdrop-filter: blur(2px)，否则滚动边缘会“渗色”
悬停效果不是锦上添花，而是层级确认信号
没有悬停反馈的表格，用户无法判断当前聚焦在哪行，尤其在密集数据中容易看串行。但悬停不能只改背景色——那样只是“换色”，不是“浮起”。
- 推荐组合：
transition: all 0.15s ease+transform: translateY(-1px)+box-shadow: 0 1px 4px rgba(0,0,0,0.08) - 避免只用
background-color变化，它和斑马纹冲突，且无空间感 - 悬停样式必须作用于
tbody tr:hover，而不是tr:hover，否则表头也会响应
真正难的不是写对某一条 CSS，而是理解：表格的“层级”本质是信息优先级的视觉翻译。边框合并决定结构主干，斑马纹控制阅读节奏，sticky 表头建立空间锚点，悬停提供操作确认——四个动作环环相扣，漏掉任意一环，层次感就塌一半。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
