通过移除表格默认的 border-spacing 和内边距，并将内边距应用到单元格上，可确保表头底部边框与表格外边框完全对齐，消除视觉断层。
通过移除表格默认的 `border-spacing` 和内边距，并将内边距应用到单元格上，可确保表头底部边框与表格外边框完全对齐，消除视觉断层。
在 HTML 表格中，若希望表头（<tr> 中的 <td> 或 <th>）与下方内容行之间呈现一条连续、无间隙的分隔线，并使其自然延伸至表格左右外边框，关键在于理解浏览器对表格的默认渲染机制：border-spacing（单元格间距）和 padding（表格级内边距）会破坏边框的连贯性。
默认情况下，<table> 元素具有非零的 border-spacing（通常为 2px），且 padding 会将整个表格内容向内推离外边框——这导致 .table_header 的 border-bottom 无法“触达”表格外边框，中间出现空白缝隙。
✅ 正确做法如下：
重置表格间距与内边距：
将 border-spacing: 0 显式设为零，消除单元格间的空隙；同时移除 table { padding: 10px }，避免整体内容缩进。将内边距转移至单元格：
为 <td> 或 <th> 设置 padding: 10px，既保持内容呼吸感，又确保边框从表格边缘起始绘制。-
保留圆角与边框样式：
border-radius: 8px 仍作用于 <table>，配合 overflow: hidden（虽未显式声明，但现代浏览器在 border-spacing: 0 下能正确裁剪）可保证圆角完整性。
anything-to-html下载将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
以下是优化后的完整 CSS 与 HTML 示例：
table {
border: 1px solid lightgray;
border-radius: 8px;
border-spacing: 0; /* 关键：消除单元格间空隙 */
}
.table_header {
border-bottom: 1px solid lightgray;
background-color: #f9f9f9; /* 可选：增强视觉区分 */
}
td {
padding: 10px; /* 内边距由单元格承担，而非表格 */
}<table>
<tr>
<td class="table_header">Title</td>
</tr>
<tr>
<td>Example message</td>
</tr>
</table>⚠️ 注意事项：
- 不要对 <table> 设置 padding，否则会撑开外边框，使内部边框无法对齐；
- 若使用 <th> 替代 <td> 作为表头，需同步为其设置 padding 并重置默认粗体/居中样式（如需）；
- 在旧版 IE 中，border-spacing: 0 可能不生效，此时可添加 border-collapse: collapse 作为兼容方案（但注意它会合并相邻边框，可能影响设计意图）；
- 如需响应式适配，建议用 rem 或 em 替代固定 px 值，并为移动端适当减小 padding。
通过这一结构化调整，表头底部边框将严格贴合表格左右外边框，形成专业、紧凑的消息框视觉效果。
