如何让表头内可拖拽div同时适配自身内容与表格内容？

我制作了一个带可调整列宽的表格，表头内的div可在调整列宽时将相邻列推出可视区域。目前遇到两个问题：

• 缩小列宽时会出现横向滚动条（对应截图：显示表头带滚动条的截图）
• 给div设置min-width: 100%后，列宽不会小于表格内容宽度，但当表头名称长度大于表格内容时，表头名称会被截断。

我需要让div缩小到自身内容宽度时停止，同时保证列宽不小于表格内容宽度，也就是实现两个min-width的限制效果，该如何实现？

要同时满足「不小于表格单元格宽度」和「不小于自身内容宽度」的最小宽度要求，可以利用CSS的min()函数结合fit-content属性来实现，核心是让元素自动取两个限制中的较大值作为最小宽度。

关键修改说明 #

1. 对表头的thDiv设置min-width: min(100%, fit-content)：这个规则会自动选择100%（当前表格单元格的宽度）和fit-content（自身文字内容的宽度）中的较大值作为最小宽度，完美覆盖两个需求
2. 将thDiv的overflow改为visible，避免表头文字被截断
3. 调整th的宽度规则，确保表格单元格的初始宽度能适配内容

修改后的完整代码 #

CSS代码

th {
  border: 1px solid;
  min-width: fit-content;
  width: fit-content;
}

.mainContainer {
  width: 400px;
  height: 150px;
  overflow: auto;
  border: 1px solid #000000;
}

.thDiv {
  resize: horizontal;
  overflow: visible;
  border-width: 1px;
  min-width: min(100%, fit-content);
  width: 100%;
}

td {
  border-width: 1px;
  border-style: solid;
  border-color: #000000;
}

HTML代码

<div class="mainContainer">
  <table>
    <thead>
      <tr>
        <th>
          <div class="thDiv">TESTTESTESTTT</div>
        </th>
        <th>
          <div class="thDiv">TESTTESTESTEST</div>
        </th>
        <th>
          <div class="thDiv">TEST</div>
        </th>
        <th>
          <div class="thDiv">TEST</div>
        </th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>TESTTES</td>
        <td>TESTTES</td>
        <td>TESTTES</td>
        <td></td>
      </tr>
      <tr>
        <td>TESTTTTT</td>
        <td>TESTTESTESTESTESTSTETSET</td>
        <td>TESTTESTES</td>
        <td>TESTTESTES</td>
      </tr>
      <tr>
        <td>TESTT</td>
        <td>TESTTESTESTESTESTSTETSET</td>
        <td>TESTTESTE</td>
        <td>TESTTESTE</td>
      </tr>
    </tbody>
  </table>
</div>

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