表格设置position:fixed后表头堆叠的修复方案（不使用sticky）

你遇到的核心问题是直接给每个设置position: fixed——fixed定位会让元素脱离文档流，每个都会默认定位到父容器的左上角，自然就堆叠在一起了。而且你当前的flex布局虽然让tbody可滚动，但破坏了表格原生的列对齐机制。

下面是基于fixed定位的纯CSS解决方案，完全不需要sticky，同时保证表头和列完美对齐：

核心思路 #

• 把整个<thead>设为fixed定位，而不是单个，这样thead内部的和还能保持表格的布局结构，自动对齐列宽。
• 给设置顶部外边距，避免滚动内容被fixed的表头遮挡。
• 统一thead和tbody的表格布局规则，确保列宽完全一致。

修改后的完整代码 #

CSS #

table {
  width: 100%;
  border-collapse: collapse; /* 可选，让边框更整洁 */
}

thead {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff; /* 加背景色避免被下方内容透过 */
}

tbody {
  display: block;
  margin-top: 3rem; /* 这个值要和thead的高度匹配，避免遮挡 */
  max-height: calc(100vh - 3rem); /* 控制tbody的最大高度，实现滚动 */
  overflow-y: auto;
}

tr {
  width: 100%;
  display: table;
  table-layout: fixed; /* 固定布局，确保列宽一致 */
}

th, td {
  padding: 0.8rem;
  text-align: left;
  border-bottom: 1px solid #eee;
}

HTML（与原代码一致，无需改动） #

<table>
  <thead>
    <tr>
      <th>Account No.</th>
      <th>Date</th>
      <th>Transaction Details</th>
      <th>Value date</th>
      <th>details</th>
      <th>Deposit AMT</th>
      <th>Note</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
    <tr>
      <td>1</td>
      <td>10-10-2023</td>
      <td>ALJDFLDOI 4584</td>
      <td>10-10-2023</td>
      <td>This is test data !This is test data !This is test data !</td>
      <td>test</td>
      <td>test</td>
    </tr>
  </tbody>
</table>
<div style="height: 2000px;"></div>

关键改动说明 #

• 将fixed定位从移到：这样thead作为一个整体固定在顶部，内部的和依然遵循表格的布局规则，自动保持列对齐。
• 给thead加背景色：避免滚动tbody时，下方内容透过表头显示出来。
• tbody的margin-top：必须和thead的高度匹配（可以根据实际padding调整），确保表头不会遮挡tbody的第一行内容。
• 统一table-layout: fixed：让thead和tbody的列宽计算规则一致，保证每一列的宽度完全对应。

如果需要自定义列宽，只需要给对应的设置width属性即可，比如th:first-child { width: 10%; }，tbody的对应列会自动继承这个宽度。

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