html表格border属性失效是因为html5已将其标记为obsolete，仅设border="1"无法实现真正合并边框；必须同时设置table{border-collapse:collapse}、table,th,td{border:1px solid #000}和th,td{padding:8px}三者缺一不可。
HTML表格border属性为什么失效
直接写 border="1" 在现代浏览器里看起来没效果，不是代码错了，而是 HTML5 已将该属性标记为 obsolete（过时），浏览器虽还兼容，但默认行为已变成「分离边框模型」——每个 td 和 th 自己画自己的边框，中间留空隙、上下左右堆叠，结果就是边框又粗又毛糙，甚至某些线根本对不齐。
必须同时设置三个CSS规则才能出实线
只给 table 加 border 不行，只给 td 加也不行。真正起效的最小组合是：
-
table { border-collapse: collapse; }—— 这条是核心，没有它，所有边框都“各自为政” -
table, th, td { border: 1px solid #000; }—— 必须三者都设，否则内部无分隔线或外框缺失 -
th, td { padding: 8px; }—— 替代废弃的cellpadding，控制文字离边框距离
漏掉任意一条，都会出现：只有外框、内部空白、双线重叠、文字贴边等典型问题。
移除边框时容易忽略的坑
想彻底去掉边框，光写 table { border: none; } 是不够的，因为 th 和 td 仍可能自带边框（尤其来自重置样式或框架）。安全做法是：
- 显式重置所有相关元素：
table, th, td { border: none; } - 补上
border-collapse: collapse;，防止旧样式残留导致意外间距 - 检查是否被
outline干扰（比如聚焦态表单控件），outline不是border，需单独清
细线表格和圆角边框怎么加
细线表格靠 border-collapse: collapse + 统一边框宽度；圆角只能加在 table 外层，td/th 本身不支持 border-radius（会失效）：
- 细线：
th, td { border: 1px solid #e0e0e0; }，配合border-collapse: collapse - 圆角：只对
table设border-radius: 4px;，再加overflow: hidden;切掉溢出边框 - 注意：如果用了
border-spacing，它和border-collapse: collapse冲突，后者优先级更高，前者会被忽略
最常被跳过的细节是：你看到的某条横线，其实是上一行 td 的下边框 + 下一行 td 的上边框叠加出来的——调样式前，先确认到底是哪一层在起作用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
