CSS：表格行左侧设边距但标题下划线需通至边缘的实现问题

我懂你这种纠结——本来以为是个小需求，结果用临时div凑出来的效果总觉得不够规范。其实咱们可以用纯CSS的方式，不用额外DOM元素就能完美实现：让表格每行左侧有边距，同时标题下方的下划线能延伸到表格容器的边缘。

核心思路 #

把标题下划线和表格内容的边距分开处理：

• 利用容器定位和伪元素，让标题下划线自然铺满容器宽度
• 通过表格单元格的内边距，给每行内容留出左侧空间，不用额外嵌套元素

完整代码示例 #

body{ 
  background: grey; 
  font-family: sans-serif; 
} 
.page{ 
  background: white; 
  width: 1200px; 
  margin: 0 auto;
  padding: 2rem; /* 给页面加基础内边距，避免内容贴边 */
} 
.table-con{ 
  overflow: auto;
  position: relative; /* 为标题伪元素提供定位参考 */
  padding-top: 2.5rem; /* 给标题和下划线预留空间 */
}

/* 表格标题与下划线样式 */
.table-con .table-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  margin: 0;
  font-size: 1.2rem;
}
.table-con .table-title::after {
  content: '';
  position: absolute;
  bottom: -0.3rem;
  left: 0;
  right: 0;
  height: 1px;
  background-color: #333;
}

/* 表格内容样式 */
.table-con table {
  width: 100%;
  border-collapse: collapse;
}
.table-con td {
  padding-left: 1.25rem; /* 单元格左侧留边距，实现整行的左侧边距效果 */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #eee;
}
.table-con th {
  text-align: left;
  padding-left: 1.25rem; /* 表头也同步左侧边距 */
  padding-bottom: 0.75rem;
  font-weight: 600;
}

代码说明 #

1. 标题下划线处理：通过给.table-con设置position: relative，让标题的伪元素::after可以用left:0; right:0铺满整个容器宽度，完美延伸到边缘，不需要额外的div来“补全”线条。
2. 表格行边距：直接给<td>和<th>设置padding-left，既实现了每行左侧的空白边距，又保持了表格结构的整洁，不会破坏表格的布局逻辑。
3. 容器内边距：.table-con的padding-top是为了给标题留出显示空间，避免标题和表格内容重叠。

这个方案完全抛弃了之前的临时div方法，结构更简洁，维护起来也更方便~

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