Angular 5中Bootstrap表格固定表头列重叠问题求助

这个问题我之前也碰到过！核心原因是你把thead和tbody拆成了两个独立的“table”来实现滚动，导致表头和表体的列宽无法自动同步，加上table-layout: fixed的强制规则，反而让列宽的不匹配问题更明显了。给你两个靠谱的解决方案：

方案一：用position: sticky实现表头固定（推荐） #

这是现代浏览器最优雅的实现方式，不需要破坏表格的原生结构，列宽会自动对齐，完全不用手动计算宽度：

HTML结构 #

<div class="table-wrapper">
  <table>
    <thead>
      <tr>
        <th>用户ID</th>
        <th>用户名</th>
        <th>注册时间</th>
      </tr>
    </thead>
    <tbody>
      <!-- 这里放你的大量数据行 -->
      <tr><td>1</td><td>Alice</td><td>2023-01-01</td></tr>
      <tr><td>2</td><td>Bob</td><td>2023-01-02</td></tr>
      <!-- ...更多行 -->
    </tbody>
  </table>
</div>

CSS样式 #

.table-wrapper {
  height: 500px; /* 固定容器高度，触发滚动 */
  overflow-y: auto;
}

table {
  width: 400px;
  border-collapse: collapse; /* 合并边框，避免间隙 */
}

thead th {
  position: sticky;
  top: 0;
  background-color: #fff; /* 设置背景色，覆盖下方滚动的内容 */
  z-index: 1; /* 确保表头在最上层 */
}

/* 可选：添加基础样式美化 */
th, td {
  border: 1px solid #eee;
  padding: 10px;
  text-align: left;
}

这个方案的优势是完全保留表格的原生行为，列宽会根据内容自动调整，表头和表体的列宽始终保持一致，而且兼容性很好（除了IE，现在几乎没人用了）。

方案二：修复拆分thead/tbody的列宽问题（兼容旧场景） #

如果你因为某些原因必须用原来的拆分方式，那需要手动给每一列设置完全一致的宽度，让表头和表体的列宽强制同步：

table {
  width: 400px;
}

tbody {
  display: block;
  height: 500px;
  overflow: auto;
}

thead, tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

thead {
  width: calc(100% - 1em); /* 减去滚动条的宽度，避免表头被遮挡 */
}

/* 关键：手动指定每一列的宽度，确保表头和表体完全匹配 */
th:nth-child(1), td:nth-child(1) { width: 100px; }
th:nth-child(2), td:nth-child(2) { width: 150px; }
th:nth-child(3), td:nth-child(3) { width: 150px; }

为什么原来的方法会重叠？因为当thead和tbody被设置为display: table后，它们变成了两个独立的表格元素，各自的列宽计算是分开的——即使都用了table-layout: fixed，它们也会根据自身的内容或默认规则分配宽度，自然会出现错位重叠。手动指定列宽后，就能强制两者的列宽一致了。

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