外框粗、内线细需用border-collapse: collapse配合table设外框粗边、th/td显式设细边框，关键要确保border-style为solid且不被重置，否则仅设border-width无效。
border-collapse: collapse 下外框粗、内线细怎么写
直接给 table 加粗边框、再给 th 和 td 设细边框，是主流做法，但必须注意：border-collapse: collapse 会让相邻边框“合并取最大值”，所以不能只靠继承或模糊设置。
正确组合是：
-
table单独设外框：border: 2px solid #000（它只管最外一圈，不影响内部） -
th, td必须显式设完整边框：border: solid #000; border-width: 1px（不能只写border-width，否则被border-style: hidden覆盖） - 必须声明
border-collapse: collapse在table上，否则内外边框会叠加出双线
示例代码：
table {
border-collapse: collapse;
border: 2px solid #000; /* 外框粗 */
}
th, td {
border: solid #000;
border-width: 1px; /* 内线细 */
padding: 8px;
}
为什么只写 border-width 不生效
几乎所有“加粗没反应”的情况，根源都在 border-style 被静默重置了——比如 normalize.css 或某些 UI 框架默认把 th、td 的 border-style 设为 hidden 或 none。
这时哪怕写了 th { border-width: 2px }，DevTools 里 border-top-width 也显示 0px，因为样式没活。
调试时盯死这三点：
- 在 DevTools 的 Computed 面板里查
border-top-style是否为solid - 如果看到
hidden，必须用th, td { border-style: solid !important }强制恢复（上线前应定位并移除源头） -
border-color也要显式写，否则部分浏览器会忽略宽度
用伪类精准控制外沿加粗（不依赖 table 自身 border）
当表格需要响应式或动态结构（比如首行/首列可变），靠 table 边框不够灵活，就得用伪类逐边控制。
核心逻辑是：所有单元格先统一细边，再用选择器“补粗”外侧四边：
-
th:first-child, td:first-child→ 左边框加粗 -
tr:first-child th, tr:first-child td→ 上边框加粗 -
tr:last-child td→ 下边框加粗 -
th:last-child, td:last-child→ 右边框加粗
注意顺序：这些规则要放在通用 th, td { border: 1px solid #000 } 之后，否则会被覆盖。
border-spacing: 0 在 separate 模式下也能实现外粗内细
不用 collapse 也能做，但代价高：必须用 border-spacing: 0 消除间隙，并给每个单元格单独设边框。
问题在于：
-
border-spacing在 IE8 及以下不支持 - 移动端 Safari 对
0.5px渲染异常，必须用整数 - 给
table加border会和单元格边框重叠，形成视觉双线
真要用它，唯一安全写法是：th, td { border: 2px solid #000 } + table { border: 3px solid #000 } + border-spacing: 0，且放弃对老浏览器的兼容。
实际项目里，90% 的外粗内细需求都卡在 border-style 没活着，而不是宽度本身。先确认 style 值，比反复调 width 有用得多。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
