直接写border="1"会出双线边框，因为浏览器默认border-collapse: separate，table与td各自渲染边框，需显式设border-collapse: collapse并统一table、th、td的border值才能融合为单线。
为什么直接写 border="1" 会出双线边框
因为浏览器默认用 border-collapse: separate，table 和每个 td 的边框各自渲染，哪怕都设成 1px solid #000，实际看到的是 2px 宽的“双线”，中间还可能透出背景色。这不是 bug，是标准行为。
必须显式加 border-collapse: collapse 才能让边框真正“融合”成一条线。只给 td 加边框、table 不加，外围就无边框——这是 collapse 模式下边框由单元格“撑出来”的机制决定。
-
table和所有td/th都要声明border，且宽度一致（比如统一用1px） - 别依赖
cellspacing或bgcolor，HTML5 已废弃这些属性，W3C 校验通不过 - 如果用了
padding，建议加box-sizing: border-box，否则背景色会缩进，露出边框底色
style="border-collapse: collapse" 必须加在 table 上
这个声明不能只写在 td 或外部 CSS 类里，它只对 table 元素生效。漏掉这句，后面所有边框和背景设置都会被白缝、错位、双线干扰。
常见错误是把 border-collapse 写在 tr 或 td 上，完全无效；或者只写了 border 却没配 collapse，结果边框看起来像“毛边”。
- 推荐直接在
<table> 标签里用内联样式：<code><table style="border-collapse: collapse;"> <li>如果用外部 CSS，也得确保选择器命中的是 <code>table，比如table.my-table { border-collapse: collapse; } - 配合
border-spacing: 0是冗余的——collapse模式下它自动失效 - 正确写法：
<td style="background-color: #ffeb3b; border: 1px solid red; padding: 8px;">**</td> - 如果只想改某一边（比如只加右边框），用
border-right: 1px solid blue -
background-color和border同时存在时，边框会压盖背景色边缘——这是正常渲染，不是 bug - 隔行变色必须配
border-collapse: collapse，否则tr:nth-child(even)的背景会被默认间隙切成断续条纹 - 不要用
tr:nth-of-type(3)这类位置选择器设背景色，数据动态增删后极易错位 - 用
data-属性驱动更可靠，比如<tr data-status="error"> + <code>tr[data-status="error"] { background-color: #ffebee; }边框与背景能否严丝合缝，关键不在颜色选得多漂亮，而在于border-collapse: collapse是否到位、border是否在table和td/th上同时声明、以及有没有忽略box-sizing和padding对视觉对齐的影响。
给特定单元格设背景色和边框色，别用 bgcolor/bordercolor
bgcolor 和 bordercolor 是 HTML4 里就废弃的属性，HTML5 完全不支持。现代写法只能用 style 里的 background-color 和 border-color。
注意：边框颜色必须配合 border-style 和 border-width 才能显示。光写 border-color: red 不会画出边框。
整行或整列高亮时，tr 和 th 的背景色容易被覆盖
给 <tr> 加 <code>style="background-color: #f0f0f0" 是最简方式，但它只影响未单独设背景色的 td；只要某个 td 自己写了 background-color，那它就优先显示自己的颜色。
表头 th 的背景色若和 td 不同，要注意它们的上下边框在 collapse 模式下会合并——th 的 border-bottom 和 td 的 border-top 变成一条线，颜色取其中后声明或更粗的那个。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
