如何实现CSS表格表头与主体内容对齐，原生HTML表格是否支持？

你当前代码出现表头与内容不对齐的核心原因如下：

• 表头th和内容td的padding设置不一致，th左右内边距为20px，td仅为10px，导致实际列宽计算出现偏差
• 你给th设置了width: max-content，直接覆盖了行内定义的百分比宽度规则
• 你给td设置了width: 100%，同样覆盖了行内百分比，且tr已经用了flex布局，子元素再混用table相关display属性（table-cell/table-column）属于逻辑冲突，会导致宽度计算异常

修复后的CSS代码如下：

.table {
  width: 100%;
  border: none;
}

.table .tbody .tr {
  display: flex;
  align-items: center;
  margin-top: 10px;
  background-color: #ddd;
  border-radius: 10px;
  border-left: 5px solid black;
}

.table .tbody .tr .td {
  text-align: left;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 18px 10px;
  box-sizing: border-box;
}

.table .thead .tr {
  display: flex;
  border: none;
  align-items: center;
}

.table .thead .tr .th {
  padding: 10px;
  box-sizing: border-box;
}

修复后表头和内容会按照你行内设置的百分比宽度自动对齐。

你要的效果完全可以通过原生HTML table实现，语义化更好，浏览器原生自动处理列对齐，不需要手动校准宽度，实现代码如下：

HTML代码 #

<div class="container mt-5">
  <table class="custom-table">
    <thead>
      <tr>
        <th style="width: 20%;">Name</th>
        <th style="width: 35%;">Description</th>
        <th style="width: 25%;">Email</th>
        <th style="width: 20%;">Location</th>
        <th style="width: 20%; text-align: right;">Action</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>John</td>
        <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</td>
        <td>john@example.com</td>
        <td>Lorem ipsum</td>
        <td style="text-align: right;">Delete</td>
      </tr>
      <tr>
        <td>Mary</td>
        <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</td>
        <td>john@example.com</td>
        <td>Lorem ipsum</td>
        <td style="text-align: right;">Delete</td>
      </tr>
      <tr>
        <td>July</td>
        <td>Lorem ipsum, dolor sit amet consectetur adipisicing elit.</td>
        <td>july@example.com</td>
        <td>Lorem ipsum</td>
        <td style="text-align: right;">Delete</td>
      </tr>
    </tbody>
  </table>
</div>

CSS代码 #

.custom-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 10px; /* 控制行间距 */
}

.custom-table th {
  text-align: left;
  padding: 10px;
  box-sizing: border-box;
}

.custom-table td {
  padding: 18px 10px;
  background-color: #ddd;
  max-width: 280px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  box-sizing: border-box;
}

/* 实现每行的左侧边框和圆角 */
.custom-table tbody tr td:first-child {
  border-left: 5px solid black;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.custom-table tbody tr td:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
}

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