table默认边框不可见是因为border-collapse默认为separate，单元格边框分离且不合并；需设border-collapse:collapse并为table及所有td/th显式设置border才能实现全边框可见。
table 元素默认边框为什么看不见
因为 table 默认的 border-collapse 是 separate，单元格之间有间隙，且 border 只作用在单个 td 或 th 上，导致整体边框断开、重叠或被遮挡。不加额外样式时，你看到的往往只有部分边线，甚至完全没边框。
用 border-collapse: collapse 统一控制边框
这是实现“全边框可见”的核心。它让相邻单元格的边框合并为一条线，避免间隙和重复绘制。必须同时设置 table 和所有 td/th 的 border，否则某些边仍会缺失。
常见错误：只给 table 加 border，却不设 border-collapse；或设了 collapse 却漏掉 td 的 border，结果内部线消失。
-
table必须设border-collapse: collapse -
td和th都要显式声明border（比如1px solid #000） - 如果需要外边框更粗，可单独给
table加border，但内部线仍由td/th控制
<style>
table { border-collapse: collapse; border: 2px solid #333; }
td, th { border: 1px solid #666; padding: 8px; }
</style>
| 姓名 | 年龄 |
|---|---|
| 张三 | 25 |
处理空单元格或 colspan/rowspan 导致的边框断裂
当某行用了 colspan 或某列用了 rowspan，合并后的单元格若没设 border，相邻单元格的边框可能无法自动延伸，造成视觉断点。尤其在动态渲染表格时容易漏掉。
- 确保所有
td和th（包括带colspan/rowspan的）都继承或显式设置了border - 避免用
empty-cells: hide—— 它会让空td不画边框，直接破坏全边框效果 - 如需统一风格，建议用类名批量控制，而不是依赖元素选择器
兼容老浏览器时的 fallback 注意点
IE8 及更早版本对 border-collapse: collapse 支持不稳定，特别是配合 padding 或 background-color 时，可能出现边框错位或颜色覆盖。现代项目基本不用考虑，但如果维护遗留系统：
- 不要依赖
border-spacing（IE7- 不支持），改用cellspacing="0"属性 - 避免在
td上同时设background和细边框 —— IE8 里常出现边框被背景“吃掉” - 真要兼容，可用
outline模拟外边框，但仅限最外层table，不能替代内部线
边框是否“全可见”，关键不在代码多寡，而在 border-collapse 和每个单元格边框声明是否真正生效。漏掉任意一个 td 的 border，或者忘了设 collapse，整张表就可能看起来像没边框。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
