html table 的 border 属性已过时，仅设像素整数且不控颜色样式；现代应改用 css 的 border 简写（如 border: 2px solid #000），并确保 td/th 单元格级控制，配合 border-collapse 行为统一调整。
HTML border 属性只能设像素整数，且已过时
直接在 <table border="2"> 里赋值，确实能显示边框，但这是 HTML4 的遗留用法，现代浏览器虽兼容，但行为不可控：它只控制“默认边框宽度”，不指定颜色、样式，也不影响 <code><td> 或 <code><th>；更关键的是，它会被 CSS 的 <code>border-collapse 覆盖或忽略。比如设 border="2"，但 CSS 里写了 border-collapse: collapse，实际渲染可能仍是 1px —— 因为该属性本质是给整个表格加一个“外围描边”，和单元格边框不是同一层逻辑。
它还强制使用系统默认颜色（通常是灰色），无法自定义；且不支持响应式单位（如 rem）、关键字（medium）或单边控制。老项目维护时偶尔会见到，但新代码中应避免。
border-width 单独设置无效，必须配齐 border-style 和 border-color
很多人写 td { border-width: 3px; } 发现没反应，不是语法错，而是浏览器根本无视这个声明——因为 border-style 默认是 none，没有样式，宽度再大也看不见。同理，border-color 若未显式声明，部分浏览器会按 currentcolor 推导，但不可靠（尤其在重置样式后）。
- 正确写法必须三者至少出现两个：推荐用
border: 3px solid #000一次性定义 - 若需单边加粗，用
border-bottom-width: 2px前，确保已有border-bottom-style: solid - 检查 DevTools 的 Computed 样式，重点看
border-top-style是否为solid，而不是只盯border-top-width
表格边框变粗真正起效的是单元格级控制，不是 table 元素
给 table 加 border: 3px solid #000 只画出最外一圈；内部单元格之间仍靠 td 和 th 的边框拼合。而 border-collapse: collapse（几乎所有框架默认启用）会让相邻单元格的边框“合并”，最终显示宽度取两者中较大者。所以想让内部分隔线也变粗，必须操作 td, th。
- 统一加粗：
td, th { border: 2px solid #333; } - 外粗内细：
td, th { border: 1px solid #ccc; } td:first-child, th:first-child { border-left-width: 3px; } tr:last-child td { border-bottom-width: 3px; } - 带合并单元格（
rowspan/colspan）时，table的border完全不覆盖内部结构，只能靠td选择器逐个控制
用 border 简写比拆开写更安全，但要注意顺序和完整性
border: 2px solid #000 是最简、最稳的写法，因为它隐式设定了 style 和 color。但漏掉任意一部分就会失效：border: 2px #000 缺少 style，整个声明被浏览器丢弃；border: solid #000 缺少宽度，结果是默认的 medium（约 3px，但不可控）。
- 语法顺序固定：宽度 → 样式 → 颜色，不可调换
- 单边简写如
border-top: 3px dashed red同样需三要素齐全 - 响应式场景慎用固定
px：高 DPI 屏上 1px 实际渲染为 2 物理像素，视觉过粗；可用border-width: clamp(1px, 0.1vw, 2px)或box-shadow: 0 0 0 1px #000替代
border-collapse: collapse 还是 separate，以及哪一层（table / tr / td）的边框规则正在生效——这决定了你该改哪一行 CSS。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
