HTML+CSS表格首列固定异常：滚动时第二列覆盖首列求助

问题场景 #

用HTML+CSS实现表格滚动时首列固定在左侧25px位置，但滚动过程中第二列会覆盖首列。

原代码 #

HTML代码 #

<div class="container">
  <section class="report-section-main">
    <div class="scroll-wrap" style="display: flex;">                
      <table id="table-manager" class="minus-width">
        <tbody>
        <tr>
          <th class="col-sticky-after-btn border-round-top-left">Fixed Column</th>
          <th class="text-center-in-table font-size-12">Column 2</th>
          <th class="text-center-in-table font-size-12">Column 3</th>
          <th class="text-center-in-table font-size-12">Column 4</th>
          <th class="text-center-in-table font-size-12">Column 5</th>
          <th class="text-center-in-table font-size-12">Column 6</th>
          <th class="text-center-in-table font-size-12">Column 7</th>
          <th class="text-center-in-table font-size-12">Column 8</th>
          <th class="text-center-in-table font-size-12">Column 9</th>
          <th class="text-center-in-table font-size-12">Column 10</th>
          <th class="text-center-in-table font-size-12">Column 11</th>
          <th class="text-center-in-table font-size-12">Column 12</th>
          <th class="text-center-in-table font-size-12">Column 13</th>
          <th class="text-center-in-table font-size-12">Column 14</th>
          <th class="text-center-in-table font-size-12">Column 15</th>
          <th class="text-center-in-table font-size-12">Column 16</th>
          <th class="text-center-in-table font-size-12">Column 17</th>
          <th class="text-center-in-table font-size-12">Column 18</th>
          </tr>
          <tr class="default-row">
            <td class="col-sticky-after-btn col-name">Information on the column</td>
            <td class="text-center-in-table">
              INFO
            </td>
           <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
            <td class="text-center-in-table">
              INFO
            </td>
          </tr>          
        </tbody>
        </table>
    </div>
  </section>        
</div>

CSS代码 #

.container{
  padding: 25px;
}

td{
  border:1px solid black;
}

.report-section-main .col-sticky-after-btn {
    position: -webkit-sticky !important;
    position: sticky !important;
    left: 25px;
    z-index: 2;
    border: none;
    background-color:white;
    width: 119px;
    max-width: 119px;
    white-space: normal !important;
}

问题原因及修复方案 #

核心问题 #

1. scroll-wrap使用display:flex，干扰了sticky元素的定位上下文，导致固定逻辑异常。
2. 未明确设置滚动容器，sticky元素的滚动祖先不正确，造成定位偏移。
3. 表格默认的border-collapse: collapse会让单元格边框重叠，加剧视觉上的覆盖问题。

修改后的CSS代码 #

.container{
  padding: 25px;
}

table {
  border-collapse: separate; /* 避免边框重叠导致的视觉覆盖 */
  border-spacing: 0; /* 保持单元格间距为0，不破坏原有布局 */
}

td, th {
  border:1px solid black;
}

.report-section-main .scroll-wrap {
  display: block; /* 移除flex布局，恢复正常块级容器特性 */
  overflow-x: auto; /* 设置为滚动容器，让表格在该容器内横向滚动 */
}

.report-section-main .col-sticky-after-btn {
    position: -webkit-sticky;
    position: sticky;
    left: 0; /* 相对于scroll-wrap左侧固定，结合container的25px padding，正好对应页面左边缘25px位置 */
    z-index: 10; /* 提高层级，确保固定列始终在其他列上方 */
    border: none;
    background-color:white;
    width: 119px;
    max-width: 119px;
    white-space: normal;
}

修复说明 #

• 调整scroll-wrap的布局为block并添加横向滚动，让它成为表格的专属滚动容器，确保sticky元素基于正确的上下文定位。
• 修改left值为0，利用container的padding间接实现页面左边缘25px的固定需求，避免定位偏移。
• 调整表格边框规则，既解决边框重叠问题，又保持原有样式一致性。
• 提高固定列的层级，彻底避免被其他列覆盖。

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