html table的border属性仅作语义标记，不控制样式；可靠边框必须用css三要素：table{border-collapse:collapse}合并边框、table{border}设外框、th,td{border}设内框，且border必须含样式（如solid）。
HTML border 属性只管语义，不管线条样式
直接写 <table border="1"> 看起来有边框，但它不是“画了一条线”，而是告诉浏览器：“这是数据表，按你的默认样式渲染”。Chrome 可能画外框加断续内线，Firefox 可能只画外框，Safari 甚至省略部分单元格边框——这不是 bug，是规范允许的自由实现。
<p>更关键的是：<code>border="0" 在 HTML5 中非法，被静默忽略；border="2"、border="8" 等数值属于无效值，浏览器丢弃，不报错也不加粗。你改数字，边框粗细不会变，颜色永远是灰色，线型永远是 solid，圆角、虚线、阴影统统不支持。
-
border="1"≠ “1 像素边框”，它等价于语义标记role="grid"，视觉效果由 UA 默认样式决定 - 想让边框变红？不行。改成虚线？不行。加圆角？不行。响应式缩放？不行
- 保留
border="1"的老代码，又加了 CSS 边框，容易触发优先级冲突，结果不可预测
border-collapse: collapse 是合并边框的唯一可靠开关
表格看起来“双线”或“加粗”，根本原因不是 border 属性值太大，而是浏览器默认用 border-collapse: separate —— 每个 th 和 td 独立画边框，右边框 + 左边框 + 默认 border-spacing: 2px 缝隙，视觉上就是两条线。
border-collapse: collapse 必须写在 table 元素上才生效，它废除 border-spacing，强制相邻边框合并为一条线。但注意：它本身不画线，只决定“怎么画”。没配 border 声明，照样没边框。
- 只写
table { border-collapse: collapse; }→ 表格依然无边框 - 只写
table { border: 1px solid #333; }→ 只有外框，内部无分隔线 - 正确组合：
table, th, td { border: 1px solid #333; }+table { border-collapse: collapse; } - 三者边框宽度不一致时（比如
table设 2px，td设 1px），交界处按“宽者胜出”规则取舍，不会叠加
border 三要素缺一不可，样式（solid）是硬门槛
写 border: 1px #333 不生效，因为缺了 border-style。浏览器默认值是 none，哪怕你写了宽度和颜色，没指定 solid、dashed 这类样式，边框就等于没设。
表格单元格要单边边框（比如只加下边框做分隔线），别用 border 简写再覆盖其他三边，直接用 border-bottom 等单边属性。它们互不干扰，也不会意外清掉别的边。
- ✅ 正确：
border: 1px solid #ccc、border: #666 dashed 2px、border-bottom: 1px dotted #999 - ❌ 错误：
border-width: 1px; border-color: #000;（没样式）、border: 1px #000;（缺样式） - 颜色可省略，此时取当前文本色：
border: 1px dashed合法 -
outline不是边框，它是焦点轮廓，不占布局空间，不能设单边，也不能用border-radius圆角
响应式表格边框容易塌陷，必须兜底宽度
border-collapse: collapse 解决的是“怎么画线”，不是“画多宽”。它会让表格收缩以贴合内容，尤其当列内容短、父容器窄时，可能造成文字挤压、边框视觉塌陷——这不是边框设置错了，而是布局没兜底。
常见疏漏是忘了给 table 加 width 或 min-width 控制。移动端尤其明显：表格挤成一团，边框连成一片，看不出行列结构。
- 固定宽度：
table { width: 100%; }或table { min-width: fit-content; } - 响应式场景下，
table { display: block; overflow-x: auto; }配合width: max-content更稳妥 - 如果用了
border-spacing（仅在separate模式下有效），它的值会直接影响表格总宽度，需一并计算
border-collapse 是否启用、border 三要素是否齐全、以及表格自身宽度是否兜底——这三个点漏掉任何一个，都可能让边框“看起来不对劲”，而不是代码写错了。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
