HTML table的border属性仅作语义标记，不控制样式；可靠边框必须用CSS三要素：table{border-collapse:collapse}合并边框、table{border}设外框、th,td{border}设内框，且border必须含样式（如solid）。

HTML border 属性只管语义，不管线条样式

直接写 <table border="1"> 看起来有边框，但它不是“画了一条线”，而是告诉浏览器：“这是数据表，按你的默认样式渲染”。Chrome 可能画外框加断续内线，Firefox 可能只画外框，Safari 甚至省略部分单元格边框——这不是 bug，是规范允许的自由实现。

更关键的是：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 声明，照样没边框。

立即学习“前端免费学习笔记（深入）”；

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 只写 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 三要素是否齐全、以及表格自身宽度是否兜底——这三个点漏掉任何一个，都可能让边框“看起来不对劲”，而不是代码写错了。