直接用 border 简写属性加粗表格边框通常失效，因 table 的 border 仅控制外框，内部单元格需单独设 border 并配合 border-collapse: collapse 才能真正合并边框；推荐用 border-width 单独设置并确保 border-style 已定义，避免使用过时的 html border 属性。
直接用 border 简写属性加粗表格边框，在大多数情况下会失效——不是 CSS 写错了，而是表格的边框渲染机制和普通元素不同。
为什么只写 table { border: 3px solid #000; } 不起作用
因为 table 元素本身的 border 只控制外框；内部单元格（th、td）若没设边框，就只有四条外边线，表格内部是空的。更常见的情况是：你同时给 table 和 td 都写了 border，但没加 border-collapse: collapse，结果相邻单元格边框叠加，看起来“粗了”，其实是双线错觉。
- 浏览器默认
border-collapse: separate，每个单元格边框独立渲染，间距由border-spacing控制 -
border-collapse: collapse才能让th/td的边框真正合并成单线，这时加粗才可控 - 如果用了框架（如 Bootstrap、Tailwind），它们常默认启用
collapse，但边框样式可能被重置，需检查计算样式
border-width 单独设置比 border 更可靠
当表格已启用 border-collapse: collapse，直接改 border-width 是最稳的加粗方式——它不干扰已有颜色和样式，且能精细控制每一边。
- 必须先确保
border-style已定义（比如solid），否则border-width会被浏览器忽略 - 推荐写法：
td, th { border-style: solid; border-color: #000; border-width: 2px 1px 1px 2px; }（左/上边框加粗，适合强调外轮廓） - 想只加粗最后一行下边框：
tr:last-child td { border-bottom-width: 2px; } - 想加粗第一列左边框：
td:first-child, th:first-child { border-left-width: 3px; }
别踩 border="1" 这个过时坑
HTML 的 border 属性（如 <table border="3">）在 Chrome 120+、Edge 122+ 中已被忽略或降级为 <code>border="1"，且无法控制颜色、样式、圆角，还会和 CSS 边框冲突。
- 现代项目必须移除它，或显式重置：
table[border] { border: none !important; } - 它的行为不响应
border-collapse，也不支持媒体查询，打印时经常错位 - 如果老系统里还存在，优先用 CSS 覆盖，而不是试图兼容它
真正要加粗的从来不是“某一条线”，而是视觉层级——外框更重、表头分隔更明确、关键行列有锚点。这些靠的不是统一加大所有 border-width，而是对 th、tr:first-child、tr:last-child、td:first-child 等选择器做差异化控制。漏掉伪类或顺序写反，效果就出不来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
