如何让HTML表格两行间的分隔边框贴合表格外边框？

问题出在你给表格设置了padding:10px，同时默认的border-collapse: separate模式让单元格边框与表格边框独立，导致标题行的底部分隔线无法延伸到表格左右外边框。

以下是修改后的代码：

CSS 代码 #

table {
  border: 1px solid lightgray;
  border-radius: 8px;
  border-collapse: collapse; /* 合并表格与单元格边框 */
  overflow: hidden; /* 确保圆角在边框合并模式下生效 */
}

td {
  padding: 10px; /* 为单元格设置内边距，替代原表格的padding */
}

.table_header {
  border-bottom: 1px solid lightgray;
}

HTML 代码 #

<table>
  <tr>
    <td class="table_header">Title</td>
  </tr>
  <tr>
    <td>Example message</td>
  </tr>
</table>

关键修改说明 #

• border-collapse: collapse：让表格和单元格的边框合并，使标题行的底部分隔线完全贴合表格左右外边框
• 移除表格的padding，给单元格加padding：既保留内容与边框的间距，又避免分隔线被表格内边距截断
• overflow: hidden：解决边框合并模式下表格圆角不生效的问题，让整体样式更统一

内容的提问来源于stack exchange，提问作者Tahtu