通过移除表格默认的 border-spacing 和内边距（padding），并将内边距应用到单元格（）上，再配合 border-collapse: collapse 或 border-spacing: 0，即可实现表头底部边框与表格外边框的视觉无缝衔接。
通过移除表格默认的 `border-spacing` 和内边距（padding），并将内边距应用到单元格（`
`）上，再配合 `border-collapse: collapse` 或 `border-spacing: 0`，即可实现表头底部边框与表格外边框的视觉无缝衔接。 在 HTML 表格中，若希望表头行（如
|
中带 .table_header 类的 ）与下方内容行之间的分隔线“顶到”表格外边框（即无间隙、无断点），关键在于理解浏览器对表格的默认渲染机制： 默认具有 border-spacing（单元格间距）和可能的 padding，这会导致内部边框与外部边框之间出现空白或错位。✅ 正确做法是：
- 将 border-spacing: 0 显式设置在
上（替代已废弃的 cellspacing="0" 属性）；- 移除 table 自身的 padding（它会撑开外边框与内部内容的距离）；
- 将原本作用于 table 的 padding: 10px 转移到 td 元素上，确保内容留白但不影响边框连续性；
- （可选但推荐）添加 border-collapse: collapse 进一步确保边框合并行为更可控（尤其当涉及多行多列复杂边框时）。
以下是优化后的完整 CSS 与 HTML 示例：
table {
border: 1px solid lightgray;
border-radius: 8px;
border-spacing: 0; /* 消除单元格间缝隙 */
border-collapse: collapse; /* 强制边框合并，提升一致性 */
}
.table_header {
border-bottom: 1px solid lightgray;
padding: 10px; /* 内边距移至单元格层级 */
background-color: #f9f9f9; /* 可选：增强标题视觉区分 */
}
td {
padding: 10px; /* 所有单元格统一内边距 */
}
⚠️ 注意事项：
- 不要对 table 设置 padding，否则会在外边框与第一行/最后一行之间插入不可见间隙，破坏“边框连通”效果；
- 避免混用 border-collapse: separate（默认值）与手动边框控制，易引发不可预测的边框重叠或缺失；
- 若后续需支持响应式或嵌套结构，建议将样式封装为独立类（如 .message-box-table），避免全局 td 样式污染。
通过以上调整，.table_header 的底边框将紧贴表格顶部外边框下沿，与整体边框形成一条视觉连续、专业整洁的分隔线——这正是构建高质量消息弹窗、通知卡片等 UI 组件的关键细节。
|
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
