现代开发必须用css的border属性而非html的border="1"，因后者仅布尔控制有无边框、不支持颜色线型等样式，且已废弃；css可精确控制各边宽度、颜色、线型，并需配合border-collapse: collapse避免双线。
table 边框用 border 属性还是 CSS？
直接写 border="1" 能出边框，但这是 HTML 旧写法，样式控制弱、无法单独设置某条边、颜色粗细难调。现代写法必须用 CSS 的 border，否则后续改样式会反复踩坑。
关键区别：border="1" 只控制“有没有边框”，而 border: 1px solid #ccc 才能真正定义“哪条边、多粗、什么颜色、什么线型”。
- 老式
border属性只支持数字（如border="1"），不支持单位和颜色 - CSS 中
border-collapse: collapse必须加，否则表格默认是separate，会出现双线缝隙 - 如果用了
border-collapse: collapse，border-spacing就失效了，别白设
怎么让表格边框“漂亮”而不是“显眼”？
所谓漂亮，通常指干净、有呼吸感、不抢内容。不是加粗红框就高级。推荐用浅灰细线 + 内边距 + 行间分隔组合。
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #e0e0e0;
padding: 8px 12px;
}
tr:not(:last-child) {
border-bottom: 1px solid #f0f0f0;
}
-
#e0e0e0是比纯黑更柔和的边框色，避免视觉压迫 -
padding比cellspacing更可控，且兼容性更好 - 单独给
tr:not(:last-child)加底边，比每行都画边更清爽
合并单元格时边框错位怎么办？
用 rowspan 或 colspan 后，常见边框断开或重叠——本质是浏览器按单元格渲染边框，没自动对齐。解决核心是统一控制所有单元格的边框，并禁用默认间距。
- 必须设
border-collapse: collapse，否则合并后边框必然错乱 - 避免混用内联
style和外部 CSS 控制边框，优先全用 CSS - 如果某列要无边框（比如操作列），用
border-right: none，不要只删掉border声明，否则可能继承父级
响应式表格里边框变丑怎么修？
小屏下表格横向滚动时，边框常被截断或出现滚动条内阴影。这不是边框本身的问题，而是容器溢出和 box-sizing 导致的。
- 给表格外层加
overflow-x: auto，而不是直接设在table上 - 确保
table有box-sizing: border-box，否则width: 100%会算错总宽 - 移动端慎用
border-radius：圆角在border-collapse: collapse下多数浏览器不生效，强行加会导致边框断裂
border-collapse 的取值切换、box-sizing 的隐式继承、以及合并单元格后对 th/td 边框的统一覆盖逻辑。这些点不动，光调颜色粗细，效果始终不稳定。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
