用css的border属性配合border-collapse: collapse可精准控制表格边框，而html的border="1"已过时，会导致双线、样式不可控、不响应响应式等问题。
直接用 CSS 的 border 属性配合 border-collapse: collapse 就能搞定，不用 HTML 的 border="1" 属性——它过时、行为不稳定，还容易和 CSS 冲突。
为什么 border="1" 不能乱用
老式写法 <table border="1"> 看似简单，但现代浏览器只做兼容性支持：它不响应 <code>border-radius，不继承 box-sizing，更关键的是，它会让每个 <td> 和 <code><th> 都自带边框，叠加后出现“双线”或“加粗边框”。如果你同时写了 CSS 边框，结果可能完全不可控。
<ul>
<li>必须显式重置：<code>table[border] { border: none; }，否则 CSS 设置的 border 可能被忽略
border="1" 实际等价于 border: 1px solid #000，但颜色不可改，样式固定为 solid
border="1" 完全无法适配
border 和 border-collapse 必须一起写
只给 table 加 border，顶多画个外框；想让所有单元格边框连成单线，得同时控制三个地方：表格本身、表头、单元格。缺一不可，且 border-collapse: collapse 必须作用在 table 上。
- 基础写法：
table, th, td { border: 1px solid #ccc; }+table { border-collapse: collapse; } - 如果只写
table { border: 1px solid #000; }，th/td没边框，就只有外框，内部无分隔线 -
border-collapse: separate（默认）会导致相邻边框间距由border-spacing控制，视觉上就是“双线”
常见边框样式和易错点
border 是简写属性，三个值：宽度、样式、颜色。顺序可变，但 border-style（如 solid）绝不能省——浏览器默认是 none，写了 border-width 和 border-color 也不显示边框。
- 正确：
border: 2px dashed #f00;，border: 1px dotted #666; - 错误：
border-width: 1px; border-color: #000;→ 没样式，等于没设 - 要圆角？加
border-radius，但它只对table外框生效，不影响单元格内边框 - 想高亮某一行？用
tr:nth-child(2) td { border-top: 2px solid blue; }，别直接改tr的border（无效）
表格边框和 outline 别搞混
点击单元格或输入框时突然冒出一圈蓝线？那不是边框，是 outline，专为键盘焦点设计，不影响布局，也不能用 border-radius 圆角。如果误以为是边框而写 border: none，蓝线照常出现。
- 移除焦点轮廓要用：
input:focus, td:focus { outline: none; } - 但请慎用——会损害可访问性；更稳妥的是换视觉反馈，比如
:focus-visible或加背景色 -
outline不参与盒模型计算，border会撑开元素尺寸
真正麻烦的不是写法，而是忘记统一设置 th 和 td 的边框，或者漏掉 border-collapse 导致调试半天看不出双线哪来的。只要三者（table、th、td）边框一致 + collapse 开启，边框就稳了。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
