table 的 border-top 无效是因为 border-collapse 默认为 separate，且被内部 th/td 边框覆盖；应作用于 thead tr:first-child 或 th，并确保 border-top 包含 style（如 solid）。
border-top 为什么在 table 上没效果？
直接给 table 元素写 border-top: 2px solid #4a90e2; 常常看不到——因为默认 border-collapse 是 separate，且 table 的边框会被内部 th/td 的边框“遮盖”或抵消。
真正起作用的位置通常是：thead tr:first-child 或 th:first-child（表头行最上沿），而不是 table 自身。
- 浏览器渲染时，
table的border-top会和thead的上边框重叠，视觉上被覆盖 - 如果用了
border-collapse: collapse;，table的边框优先级更低，几乎不生效 - 想加顶部装饰条，应作用于
thead th或thead tr，而非table
给表头第一行加 border-top 的正确写法
目标是让“顶部装饰条”清晰、独立、不干扰原有边框结构。推荐锁定 thead tr:first-child 或 thead th，并配合 border-bottom: none 避免双线。
-
thead tr:first-child { border-top: 3px double #2c3e50; }—— 简洁有效，但需确认thead存在且非空 -
th { border-top: 2px solid #3498db; border-bottom: none; }—— 更稳妥，每个表头单元格都带顶边，视觉统一 - 若表格无
thead，改用tr:first-child th，但要注意是否包含其他非表头行（如标题行） - 避免同时设
table { border-top: ... }和th { border-top: ... }，否则可能叠加出意外粗细
border-top 样式参数怎么选才不出错？
border-top 必须含 style（如 solid），只写宽度+颜色会失效——这是最常踩的坑。
- 合法写法：
border-top: 2px solid #e74c3c;✔️ - 非法写法：
border-top: 2px #e74c3c;❌（缺 style，边框不显示） - 可省略宽度或颜色：
border-top: solid #9b59b6;或border-top: 3px solid;，但style绝对不能省 - 样式值建议用
solid（稳）、double（强调）、dashed（轻量），避免groove/ridge——它们依赖阴影和光照，在表格里易失真
响应式下顶部装饰条容易消失？
小屏时表格常转为滚动容器（overflow-x: auto），如果装饰条只加在 th 上，而 th 被固定定位或脱离文档流，border-top 可能被裁切或错位。
- 检查是否用了
position: sticky固定表头——此时需额外给th[style*="sticky"]单独加border-top - 媒体查询中别只改字体大小，也同步调整
border-top-width，比如从2px改为1.5px，避免在小屏显得过重 - 用
box-shadow: 0 -2px 0 #2980b9替代border-top是个备选方案，它不受border-collapse影响，且支持半透明
顶部装饰条不是简单加一行边框的事——它得和 border-collapse、表头结构、响应式行为咬合住，漏掉任一环，就只剩一条若隐若现的线。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
