border-width单独设置才真正生效，因border-collapse:collapse下相邻边框合并，需拆分控制border-style（必须为solid等可见值）和border-width，并确保td/th样式未被重置库设为hidden或none。
border-width 单独设才真正生效
直接写 border: 2px solid #000 在表格里经常“看起来没加粗”——不是代码错了，而是 border-collapse: collapse 导致相邻边框合并，最终显示的宽度取决于哪条边被浏览器选中作为“胜出者”。
真正可控的方式是把宽度和样式拆开：border-style 必须已定义（比如 solid），否则 border-width 被忽略。
常见踩坑点：
- 重置库（如 normalize.css）可能把
th、td的border-style设为hidden，这时border-width完全不生效 - 写了
border-width: 3px，但 Elements 面板里border-top-style显示none或hidden，说明样式被覆盖了 - 只设
table { border-width: 3px }不够，td和th的边框才是视觉主体
collapse 模式下必须同时控制 table 和单元格
绝大多数项目默认启用 border-collapse: collapse，这意味着：
– table 元素的 border 只控制外框，不影响内部线条
– 内部边框由 td 和 th 的 border 决定，且会相互“挤压”
要让整个表格边框统一加粗，得这样写：
table {
border-collapse: collapse;
border: 3px solid #000; /* 外框 */
}
td, th {
border: 1px solid #000; /* 内线基础 */
border-width: 1px 2px 2px 1px; /* 右、下加粗，避免缝合错位 */
}如果只想加粗外侧，别漏掉：
– th:first-child 加左粗边：border-left-width: 3px
– tr:last-child td 加底粗边：border-bottom-width: 3px
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
separate 模式下 border-width 直接可用但有兼容风险
不用 collapse 时，每个单元格是独立盒子，border-width 会如实渲染，但默认有间隙。
想保持紧凑又用 separate，必须配 border-spacing: 0：
table {
border-spacing: 0;
}
td {
border: 3px solid #333;
}注意：
– border-spacing 在 IE8 及以下不支持
– 移动端 Safari 对 border-spacing: 0.5px 这类小数值渲染不稳定，只用整数
– 如果用了阴影或背景渐变，separate 是唯一选择，但加粗后容易显得松散
调试时重点看 computed 样式里的 border-style
Chrome DevTools 里边框没变粗？别只盯 border-top-width，它可能是 3px，但 border-top-style 是 none 或 hidden —— 宽度再大也没用。
临时验证是否样式被覆盖，可以加强制声明：
td {
border-style: solid !important;
border-width: 3px;
}确认生效后再逐步移除 !important，定位具体是哪条 CSS 规则在干扰。
复杂表格（带 rowspan/colspan 或嵌套表头）里，table 的 border 几乎不管用，真正起效的是对每个 td、th 的逐个控制。
