只给table设border-color无法改内侧线颜色，因为内侧线由td/th边框构成而非table边框；需设置border-collapse:collapse并统一声明td/th的完整border（含width、style、color）。
为什么只给 table 设 border-color 无法改内侧线颜色
内侧网格线（即单元格之间的分隔线）根本不是 table 元素的边框，而是由每个 td 和 th 的边框共同构成的。默认 border-collapse: separate 下，相邻单元格边框各自渲染，你改 table 的颜色，对它们毫无影响。
常见错误现象：<table style="border-color: #f00"> → 外框可能变红，但内部还是浅灰或黑色；<code><td style="border-color: red"> 却没效果 → 因为漏了 <code>border-style 和 border-width。
- 必须同时声明
border-width和border-style，否则border-color不生效 - 内侧线颜色最终由
td、th的边框决定，不是table的 -
border-collapse: collapse是前提，否则会看到双线、错位、颜色叠加
border-collapse: collapse 必须加在 table 上，且不能省略
不加这句，浏览器按默认 separate 模式渲染：每个 td 边框独立存在，间距由 border-spacing 控制，结果就是“两条线挨着”，颜色互相干扰，粗细加倍，视觉混乱。
加了之后，相邻边框合并成一条线，td 和 th 的边框才真正成为“内侧网格线”的唯一来源。
- 写在
td或th上无效，必须作用于table元素 - 如果要保留间隙（比如卡片式布局），改用
border-spacing: 2px+border-collapse: separate，但此时内侧线颜色需分别控制每个单元格的四边 - 性能上，
collapse渲染更轻量，尤其对百行以上表格
如何精准控制内侧线为单一颜色（如浅灰）
目标是所有横竖分隔线统一为 #e0e0e0，不粗不细、不双不虚。核心是统一设置 td 和 th 的边框，并利用 collapse 合并逻辑。
<style>
table { border-collapse: collapse; }
th, td { border: 1px solid #e0e0e0; }
</style>
- 不要只写
border-color: #e0e0e0—— 缺border-style和border-width就等于没写 - 用
border简写最稳妥：border: 1px solid #e0e0e0 - 若只想保留横向分隔线（如报表），可只设
border-bottom；只想竖向，只设border-right - 注意：表头
th若有额外样式（如背景色），别忘了同步设边框，否则容易断线
想让内侧线和外框颜色不同（如外框深蓝、内线浅灰）
这是高频需求，关键在于分层控制：外框归 table，内线归 td/th，且两者都用完整 border 声明。
<style>
table {
border: 2px solid #1976d2; /* 外框 */
border-collapse: collapse;
}
th, td {
border: 1px solid #e0e0e0; /* 内侧线 */
}
</style>
- 别指望靠
table的border-color影响内线 —— 它只管自己那圈 - 如果
td边框比table宽（比如2pxvs1px），在collapse下宽者优先，颜色也以宽边为准 - 避免混用单位（如
border: 1 solid #000）—— 缺px会导致部分浏览器静默失败 - 上线前务必在 Chrome/Firefox/Edge 中检查是否一致；Safari 对
border-collapse的解析最严格
实际调样式时，最容易被忽略的是：border-style 必须显式声明，且不能是 none 或 hidden；border-collapse: collapse 必须写在 table 上，而不是靠继承或父容器生效。 这两点一错，颜色就永远出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
