HTML表格边框需通过border-collapse与border协同控制：不设collapse时显示双线；border="1"因默认separate模型和border-spacing导致断开；正确做法是三步CSS设置——collapse、table外边框、th/td内边框。
HTML 表格边框不是靠 border 属性“直接画出来”的——它靠的是 CSS 的 border-collapse 和 border 协同控制，不设 border-collapse: collapse 时，border 会显示双线（外边框 + 单元格间隙），这是绝大多数人卡住的第一步。
为什么加了 border="1" 还没边框？
HTML 4 的 border 属性（如 <table border="1">）在现代浏览器中虽仍能触发边框渲染，但行为不可控：它默认启用分离边框模型（border-collapse: separate），且单元格间有默认间距（border-spacing），导致边框断开、粗细不均、内边框重复出现。
- 废弃的
border属性无法设置颜色、样式（如dashed）、圆角 - 即使设了
border="1"，若未显式重置border-spacing，列与列之间仍有白缝 - Chrome/Firefox 对该属性的兼容逻辑已和 CSS 边框模型耦合，实际效果等价于
border-collapse: separate; border-spacing: 2px
正确设置单线表格边框的三步法
必须用 CSS，且顺序不能错：
- 给
<table>设置border-collapse: collapse—— 合并所有边框，消除间隙 - 给
<table>设border（控制外边框），例如border: 1px solid #333 - 给
<th>和<td>设border（控制内边框），值通常和外边框一致，否则会出现“加粗交界线”
table {
border-collapse: collapse;
border: 1px solid #333;
}
th, td {
border: 1px solid #333;
padding: 8px;
}
border-collapse: separate 什么时候有用？
不是所有场景都要“合并”。当需要设计带呼吸感的网格（如数据看板、卡片式表格）、或要求单元格边框独立悬停变色时，separate 模型更可控：
立即学习“前端免费学习笔记（深入）”；
- 必须配合
border-spacing使用（如border-spacing: 4px 2px，分别控制列/行间距） - 此时
<table>的border只画外框，<th>/<td>的border各自生效，互不干扰 - 注意：IE8- 不支持
border-spacing，若需兼容，得用cellspacingHTML 属性（仅整数像素，无单位）
常见坑：边框消失、错位、颜色不一致
这些问题几乎都源于边界条件被忽略：
-
<thead>或<tbody>上误加border，会覆盖<th>/<td>的边框，造成局部缺失 - 用了
outline代替border——outline不占布局空间，会导致相邻单元格“挤在一起”，视觉上像边框塌陷 - 在
border-collapse: collapse下，相邻单元格的边框宽度/样式/颜色不同时，浏览器按“胜出规则”取舍（比如粗边框覆盖细边框），而非叠加 - 响应式表格中，
display: block或overflow-x: auto容器可能导致边框被截断，需检查父容器padding和box-sizing
真正难的不是写对那几行 CSS，而是意识到表格边框本质是「边框模型 + 间距策略 + 继承优先级」三者博弈的结果；漏掉任意一环，都会让边框在某个浏览器、某种缩放比例、某次 DOM 更新后突然失序。
