HTML固定表头表格实现行悬停完整边框无异常的非JS解决方案

嘿，我完全懂你遇到的这些糟心问题——边框导致行跳动、悬停时顶部边框被表头挡住、用outline又缺左右边，确实挺头疼的。这里有个纯CSS的解决方案，不用写一行JS，完美解决所有问题：

核心思路拆解 #

• 解决行跳动：给内容行默认设置透明边框，hover时只修改边框颜色，避免元素尺寸变化
• 避免边框被表头遮挡：提升表头的层级，让表头始终悬浮在内容行上方
• 保证边框完整性：调整表格的边框合并模式，让每行的边框独立可控

完整实现代码 #

<body>
  <style>
    div {
      width: 600px;
      height: 300px;
      overflow-y: scroll;
    }

    table {
      width: 100%;
      border-collapse: separate; /* 改用分离模式，让行边框独立 */
      border-spacing: 0; /* 保持表格紧凑无间隙 */
    }

    th {
      position: sticky;
      top: 0;
      background-color: white;
      z-index: 2; /* 提升层级，避免被下方行的边框遮挡 */
      border-bottom: 1px solid #ccc; /* 给表头加底部边框，区分内容 */
      padding: 8px; /* 可选：增加内边距，优化视觉 */
    }

    .bodyRow {
      border: 1px solid transparent; /* 初始透明边框，防止hover尺寸变化 */
    }

    .bodyRow:hover {
      border: 1px solid blue; /* hover时显示完整蓝色边框 */
    }

    /* 去掉单元格左右边框，避免和行边框重复 */
    .bodyRow td {
      border-left: none;
      border-right: none;
      padding: 8px; /* 可选：和表头内边距统一 */
    }
  </style>

  <div>
    <table>
      <thead>
        <tr class="headerRow">
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tbody>
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
        <!-- 可以继续添加更多行测试滚动效果 -->
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
        <tr class="bodyRow">
          <td>abc</td>
          <td>def</td>
          <td>ghi</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

效果说明 #

• 表头会固定在容器顶部，滚动内容时不会跟随滚动
• 鼠标悬停内容行时，会显示完整的蓝色边框，不会出现跳动
• 滚动到表头下方的行时，表头会覆盖行的顶部边框（这是合理的，因为表头是固定导航元素，应该始终保持视觉层级优先）
• 所有边框显示完整，没有缺失左右边的问题

备注：内容来源于stack exchange，提问作者Wolf Donner