必须设置 border-collapse: collapse 和 overflow: hidden，否则表格边框双线模糊、圆角失效；th/td 边框需单独定义，padding 应差异化，隔行变色须限定在 tbody 内。
border-collapse: collapse 必须设，否则边框又粗又糊
浏览器默认给 table、th、td 各自渲染边框，再叠上 border-spacing（默认 2px），结果就是“双线边框+缝隙”，尤其在深色背景上特别刺眼。不加这句，后面所有边框样式都会失真。
必须写：table { border-collapse: collapse; }
- 别只给
table加border——它只控制外框；真正要样式化的，是th和td的边框 - 如果用了
border-collapse: separate（比如想留缝隙），就一定要同步清掉border-spacing: 0，否则移动端容易溢出 -
border-collapse: collapse下，border-spacing无效，别白费劲设它
th 和 td 的边框要分开写，padding 也得差异化
表头和数据单元格对呼吸感的需求不同，硬套同一值反而降低可读性。比如 th 需要更强的列标识感，td 要兼顾数字/文本混合排布。
推荐写法：th, td { border: 1px solid #ddd; }th { padding: 10px 16px; background-color: #f2f2f2; }td { padding: 8px 14px; }
- 避免用
padding: 12px这种简写——上下 padding 过大会撑高行高，导致斑马纹错位或悬停效果发虚 - 如果表格有图标或复选框，
padding-left单独加大 20px，比整体 padding 更可控 - 颜色别用纯灰：
#f9f9f9比#f0f0f0更柔和，且在 OLED 屏上不会发亮刺眼
圆角 + 阴影要生效，overflow: hidden 和 box-shadow 得配齐
border-radius 对 table 元素本身有效，但内部单元格边框会“顶破”圆角，造成视觉断裂。
关键组合：table { border: 2px solid #007BFF; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
-
overflow: hidden是必须项，防止内部边框溢出圆角区域 - 阴影建议用
box-shadow，不用outline——后者不占文档流，但无法配合border-radius做平滑裁切 - 如果表格内容滚动，
box-shadow会随内容移动；固定表头时，需单独给thead加z-index和background-clip: padding-box
隔行变色失效？nth-child(even) 必须限定在 tbody 里
很多人写 tr:nth-child(even)，结果第一行（th 在 thead）也被算进序号，导致第一行数据就变色。根源在于伪类计数是按 DOM 树层级来的，不是按“数据行”逻辑。
正确写法：tbody tr:nth-child(even) { background-color: #f9f9f9; }
-
thead和tfoot不参与tbody内的:nth-child计数，所以能精准控制数据行 - 动态插入行（比如 JS
append）不影响:nth-child，但:nth-of-type可能漏掉某些tr - 悬停效果建议加：
tbody tr:hover { background-color: #eef7ff; }，不加会显得生硬
border-collapse: collapse 和 overflow: hidden 这两个看似简单的声明——它们不显眼，但缺一不可。边框再细、颜色再准，没它们，整个表格的视觉秩序就塌了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
