直接写 border="1" 不推荐，因它是 HTML4 遗留属性，HTML5 中仅作语义标识（表示数据表），不控制样式；无法设置颜色、线型，且对 th/td 无效，易导致双线或无内边框；真正可控需用 CSS 的 border-collapse: collapse 配合 table、th、td 的 border 声明。
为什么直接写 border="1" 不推荐了
因为它是 HTML4 遗留属性，HTML5 中已不推荐使用，且只能控制边框宽度（像素值），无法设颜色、线型或单独控制某一边。更关键的是：它只作用于 <table> 元素本身，对 <th> 和 <td> 完全无效——这意味着你设了 border="1"，但单元格之间仍可能没线、或出现双线、或颜色不可控。
border-collapse: collapse 是单线边框的核心开关
不加这个，哪怕你给 table、th、td 都写了 border: 1px solid #000，也会看到“双线”效果：表格外框 + 单元格各自边框叠加。必须显式声明：
table {
border-collapse: collapse;
}
这时才真正实现“相邻边框合并为一条线”。常见错误包括：
- 只写了
border-collapse: collapse，但忘了给th和td设border→ 内线消失，只剩外框 - 误把
border-collapse加在td上 → 无效，它只对<table>生效 - 用
border-collapse: separate却没配border-spacing→ 单元格间默认有空隙，看起来像“断开的边框”
怎么让外框和内线颜色/粗细不同
靠组合选择器 + 显式声明，而不是依赖旧 bordercolor 属性。例如外框红色、内线浅灰：
立即学习“前端免费学习笔记（深入）”；
table {
border: 2px solid red;
border-collapse: collapse;
}
th, td {
border: 1px solid #ccc;
padding: 8px;
}
注意点：
- 如果只要外框有色、内线透明，
th, td { border-color: transparent; }比none更安全（避免盒模型塌陷） - 想让表头顶部加粗线？用
th:first-child { border-top: 2px solid #333; } - 响应式场景下，小屏可关掉内线：
@media (max-width: 768px) { th, td { border: none; } }
清除边框时最容易漏掉的三处
写 border: none 经常失效，不是语法错，而是漏掉了这三类元素：
-
table本身 —— 忘了清，外框还在 -
th和td—— 不清它们，单元格内部边框照常显示 - 继承的框架样式 —— 比如 Bootstrap 的
.table-bordered或 CMS 注入的 class，得用table, th, td { border: 0 !important; }覆盖
尤其要注意 iOS Safari 的 sub-pixel 渲染残留白线，此时 border: 0 有时比 none 更可靠；若仍存在，加 transform: translateZ(0) 强制重绘。
