通过移除表格默认的 border-spacing 和内边距（padding），并将内边距应用到单元格（<td>）上，再配合 border-collapse: collapse 或 border-spacing: 0，即可实现表头底部边框与表格外边框的视觉无缝衔接。

通过移除表格默认的 `border-spacing` 和内边距（padding），并将内边距应用到单元格（`

`）上，再配合 `border-collapse: collapse` 或 `border-spacing: 0`，即可实现表头底部边框与表格外边框的视觉无缝衔接。

在 HTML 表格中，若希望表头行（如 <tr> 中带 .table_header 类的 <td>）与下方内容行之间的分隔线“顶到”表格外边框（即无间隙、无断点），关键在于理解浏览器对表格的默认渲染机制：<table> 默认具有 border-spacing（单元格间距）和可能的 padding，这会导致内部边框与外部边框之间出现空白或错位。

✅ 正确做法是：

• 将 border-spacing: 0 显式设置在 <table> 上（替代已废弃的 cellspacing="0" 属性）；
• 移除 table 自身的 padding（它会撑开外边框与内部内容的距离）；
• 将原本作用于 table 的 padding: 10px 转移到 td 元素上，确保内容留白但不影响边框连续性；
• （可选但推荐）添加 border-collapse: collapse 进一步确保边框合并行为更可控（尤其当涉及多行多列复杂边框时）。

以下是优化后的完整 CSS 与 HTML 示例：

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

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>
  <tr>
    <td class="table_header">Title</td>
  </tr>
  <tr>
    <td>Example message</td>
  </tr>
</table>

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• 不要对 table 设置 padding，否则会在外边框与第一行/最后一行之间插入不可见间隙，破坏“边框连通”效果；
• 避免混用 border-collapse: separate（默认值）与手动边框控制，易引发不可预测的边框重叠或缺失；
• 若后续需支持响应式或嵌套结构，建议将样式封装为独立类（如 .message-box-table），避免全局 td 样式污染。

通过以上调整，.table_header 的底边框将紧贴表格顶部外边框下沿，与整体边框形成一条视觉连续、专业整洁的分隔线——这正是构建高质量消息弹窗、通知卡片等 UI 组件的关键细节。