thead固定、tbody滚动时border-collapse失效（边框显示2px）求助

这个问题我之前也碰到过！核心原因是当你给<tr>设置display:table后，每个行元素都变成了独立的表格容器，原来父级<table>的border-collapse: collapse规则没办法作用在这些独立的子表格上，导致相邻两行的边框（各自1px）直接叠加，看起来就变成了2px。

下面给你两种靠谱的解决方案，按需选择：

方案一：移除tr的display:table，用固定列宽保证对齐 #

这种方法更贴近原生表格的行为，避免创建独立子表格，能让border-collapse正常生效：

<table class="fixed-header-table">
  <thead>
    <tr>
      <th>表头列1</th>
      <th>表头列2</th>
      <th>表头列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>内容行1列1</td>
      <td>内容行1列2</td>
      <td>内容行1列3</td>
    </tr>
    <!-- 更多内容行 -->
  </tbody>
</table>

对应的CSS：

/* 基础表格样式 */
.fixed-header-table {
  width: 100%;
  border-collapse: collapse;
}

/* 让表头固定在顶部 */
.fixed-header-table thead {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 1; /* 防止内容滚动时覆盖表头 */
}

/* 设置tbody滚动区域 */
.fixed-header-table tbody {
  display: block;
  max-height: 200px; /* 按需设置滚动高度 */
  overflow-y: auto;
}

/* 给表头和内容单元格设置相同宽度，保证列对齐 */
.fixed-header-table th,
.fixed-header-table td {
  width: calc(100% / 3); /* 3列的情况，按需调整 */
  border: 1px solid #dddddd;
  padding: 8px;
  box-sizing: border-box;
}

/* 固定表头的列宽，避免内容拉伸表头 */
.fixed-header-table thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

这里只给表头的<tr>设置display:table和table-layout:fixed，保证表头列宽固定，内容单元格跟着用相同宽度，既实现滚动，又能让边框合并规则正常工作。

方案二：保留tr的display:table，调整边框为单边避免叠加 #

如果因为业务需求必须保留tr { display:table }，可以通过修改边框设置，让相邻行的边框不叠加：

.fixed-header-table {
  width: 100%;
}

.fixed-header-table thead {
  position: sticky;
  top: 0;
  background-color: #ffffff;
  z-index: 1;
}

.fixed-header-table tbody {
  display: block;
  max-height: 200px;
  overflow-y: auto;
}

.fixed-header-table tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

/* 只给单元格设置底部和左边框，避免叠加 */
.fixed-header-table th,
.fixed-header-table td {
  border-bottom: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
  padding: 8px;
  box-sizing: border-box;
}

/* 最后一列添加右边框 */
.fixed-header-table th:last-child,
.fixed-header-table td:last-child {
  border-right: 1px solid #dddddd;
}

/* 表头行单独添加顶部边框 */
.fixed-header-table thead tr th {
  border-top: 1px solid #dddddd;
}

这样设置后，每个行只有底部边框，表头额外有顶部边框，左右边框只在单元格左侧和最后一列右侧，整体边框都是1px，不会出现叠加问题。

另外要注意：使用position:sticky时，父元素不能设置overflow:hidden、overflow:auto这类属性，否则粘性定位会失效哦！

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