通过移除表格默认的 border-spacing 和内边距，并将内边距应用到单元格上，可确保表头底部边框与表格外边框完全对齐，实现视觉上的无缝衔接。
通过移除表格默认的 `border-spacing` 和内边距，并将内边距应用到单元格上，可确保表头底部边框与表格外边框完全对齐，实现视觉上的无缝衔接。
在 HTML 表格中，若希望表头（如 <tr> 中的 .table_header 单元格）与下方内容行之间的分隔线“顶到”表格外边框（即无间隙、无缝连接），关键在于理解浏览器对 <table> 的默认渲染机制：表格默认存在 border-spacing（通常为 2px）和 padding，这会导致单元格边框与表格边框之间出现空隙，破坏视觉连续性。
正确做法是：
✅ 重置表格间距与填充
移除 border-spacing（设为 0），并避免在 <table> 上设置 padding；转而将内边距（padding）施加到 <td> 或 <th> 元素上，确保内容呼吸空间不干扰边框布局。
✅ 统一边框样式
确保表格外边框（border）与表头下边框（border-bottom）使用相同颜色、粗细和样式，避免视觉断层。
以下是优化后的完整代码示例：
table {
border: 1px solid lightgray;
border-radius: 8px;
border-spacing: 0; /* 关键：消除单元格间缝隙 */
/* 移除 padding —— 改由 td 承担 */
}
.table_header {
border-bottom: 1px solid lightgray; /* 与 table 边框一致 */
background-color: #f9f9f9;
}
td {
padding: 10px; /* ✅ 内边距移至此处，保证内容留白且边框紧贴 */
}<table>
<tr>
<td class="table_header">Title</td>
</tr>
<tr>
<td>Example message</td>
</tr>
</table>⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- 不要对 <table> 设置 padding，否则会在边框内侧产生不可控空白，导致 .table_header 的 border-bottom 悬浮于表格底边之上；
- 若使用 collapse 边框模型（border-collapse: collapse），需配合 border-spacing: 0 使用（但本例中 border-collapse 非必需，因仅两行且无左右多列冲突）；
- 如后续需支持响应式或深色模式，建议将 lightgray 替换为 CSS 自定义属性（如 --border-color: #ddd），便于全局维护。
此方案简洁、语义清晰、兼容性好（支持所有现代浏览器及 IE9+），是构建干净消息框、卡片式表格等 UI 组件的推荐实践。
