表格边框粗细不一致是因浏览器默认border-collapse: separate导致table与th/td边框叠加，须改用collapse模式并统一设置：外框用:first-child/:last-child/:first-child/:last-child伪类加粗，内线设统一细边框。
为什么表格边框看起来“粗得不一致”
不是你眼花，而是浏览器默认用 border-collapse: separate 模式渲染表格——table 自带边框、每个 th 和 td 也自带边框，三者叠加就显得粗；更糟的是，某些边框（比如上下边）可能被重复绘制两次。真正要控制“不同粗细”，得先统一模型，再逐层定义。
border-collapse: collapse 是前提，不是可选项
没加这句，所有边框粗细设置都会失效或不可预测。它强制让相邻边框合并成一条线，此时你设的 1px 就是真 1px，2px 就是真 2px。
- 必须写在
table元素上，不能只写在th或td - 一旦启用，
border-spacing就失效了（别混用） - 圆角（
border-radius）需要配合overflow: hidden才能生效，否则边框会溢出
给外框加粗、内线变细的实操写法
常见需求：表格整体有醒目外边框（比如 2px），但单元格之间只用细线（比如 1px）。关键在于——不要给 table 设 border，而是用 th 和 td 的边界组合来“拼出”外框。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #ddd; /* 内线统一细 */
padding: 8px;
}
/* 上边框：第一行所有单元格 */
tr:first-child th,
tr:first-child td {
border-top: 2px solid #007BFF;
}
/* 下边框：最后一行所有单元格 */
tr:last-child th,
tr:last-child td {
border-bottom: 2px solid #007BFF;
}
/* 左右外边框：每行第一个和最后一个单元格 */
th:first-child, td:first-child {
border-left: 2px solid #007BFF;
}
th:last-child, td:last-child {
border-right: 2px solid #007BFF;
}
这样既避免了 table 边框与单元格边框冲突，又精准控制了每条边的粗细和颜色。
虚线/点线边框容易踩的坑
border-style: dashed 或 dotted 在小尺寸单元格里经常显示不全——尤其是 1px 宽度下，浏览器可能直接渲染成实线或断续极不均匀。
- 确保
border-width≥2px，虚线才稳定可见 - 不要对
table本身设虚线边框，而应只作用于th/td，否则collapse模式下虚线会错位 - 移动端缩放时，
dashed可能糊成一片，建议优先用solid+ 透明度或阴影替代
最麻烦的其实是伪类选择器和边框叠加顺序——:hover 改边框粗细时，若没重置其他方向的边宽，会导致布局跳动。这类细节不写进样式表，光靠“试试看”很难调准。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
