CSS可调整大小表头在父div溢出时无法正常工作

问题根源 #

你原代码的核心问题在于：

1. table-layout: fixed 固定了表格宽度，表头的resize无法带动列宽变化；
2. 表格默认会被父容器宽度限制，无法随表头调整扩展，导致横向滚动不生效；
3. <th>作为表格单元格，默认布局规则会限制resize属性的生效范围。

修复后的代码实现 #

HTML结构（需调整表头内部结构）

<div class="scroll">
  <table>
    <thead>
      <tr>
        <th><div>表头1</div></th>
        <th><div>表头2</div></th>
        <th><div>表头3</div></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>内容单元格1</td>
        <td>内容单元格2</td>
        <td>内容单元格3</td>
      </tr>
      <!-- 更多行 -->
    </tbody>
  </table>
</div>

CSS样式

.scroll {
  width: 800px;
  overflow-x: scroll;
  position: relative;
}

table {
  border-collapse: collapse;
  width: fit-content; /* 表格宽度自适应列宽，突破父容器限制 */
  min-width: 100%; /* 列宽总和不足父容器时，表格占满宽度 */
}

th, td {
  border: 1px solid #ccc;
  vertical-align: top;
  background-color: #f8f9fa;
}

/* 表头内部容器负责可调整逻辑 */
th > div {
  padding: 8px;
  background-color: #e9ecef;
  font-weight: bolder;
  text-align: left;
  resize: horizontal;
  overflow: hidden;
  min-width: 100px; /* 限制最小宽度，避免缩至不可读 */
}

td {
  padding: 8px;
}

关键调整说明 #

• 用width: fit-content让表格随列宽动态扩展，超出父容器时自动触发横向滚动；min-width: 100%保证表格在列宽较小时仍占满父容器。
• 将resize属性移至表头内部的<div>：表格单元格的默认布局会限制resize效果，内部块级容器能正常响应拖拽调整，同时带动整个表头列宽变化。
• 分离padding到内部容器和单元格，避免resize时padding影响实际可调整的宽度范围。

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