如何实现粘性表格表头长内容自动换行且无重叠

问题根源在于原方案中左侧列使用position: absolute后脱离了表格文档流，导致表格行无法根据左侧列的内容高度自动调整，进而出现内容重叠、行不对齐的情况。以下是修复方案：

修改后的CSS代码 #

body {
  font: 16px Calibri;
}

table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

td, th {
  margin: 0;
  padding: 8px;
  border: 1px solid grey;
}

div {
  overflow-x: scroll;
  margin-left: 5rem; /* 与左侧列宽度保持一致 */
  overflow-y: visible;
  padding-bottom: 1px;
}

tr {
  position: relative; /* 让左侧列的绝对定位基于当前行 */
}

.headcol {
  position: absolute;
  width: 5rem;
  left: 0;
  top: 0; /* 绑定行顶部，确保与行内容垂直对齐 */
  display: block;
  word-break: break-all;
  box-sizing: border-box; /* 让padding和border包含在设定宽度内 */
}

.long {
  letter-spacing: 1em;
}

修改后的HTML代码 #

<div>
  <table>
    <tr>
      <th class="headcol">row row row 1</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">row row 2</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">row row row row 3</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">4</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">5</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">row row row6</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">7</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">8</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
    <tr>
      <th class="headcol">9</th>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
      <td class="long">QWERTYUIOPASDFGHJKLZXCVBNM</td>
    </tr>
  </table>
</div>

关键修改点说明 #

• 给<tr>添加position: relative：让左侧固定列的绝对定位参考当前行，确保每行左侧列与该行内容垂直对齐。
• 调整.headcol的top属性为0：绑定到行的顶部，避免行高变化导致的偏移。
• 新增box-sizing: border-box：确保左侧列的padding和border不会超出设定宽度，避免容器margin-left不匹配的问题。
• 给表格设置width: 100%：让表格自适应容器宽度，右侧内容可正常滚动。

修改后，左侧列会保持固定，表格行高度会自动匹配该行最高单元格的内容高度，解决重叠和对齐问题，单元格也能根据内容自动扩展。

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