原生table 固定表头，头部多行固定，固定左侧几列，css解决

纯table 写的固定头部几列，左侧几列，我这里写的是固定左侧两列，头部两列，可以根据自己的需求改

html 复制代码

<div class="table-container2">
        <table>
          <thead>
            <tr>
              <th rowspan="2" class="fixed-col-1">头部1</th>
              <th rowspan="2" class="fixed-col-2">头部2</th>
              <th colspan="8">头部3</th>
            </tr>
            <tr>
              <th>头部4</th>
              <th>头部5</th>
              <th>头部6</th>
              <th>头部6</th>
              <th>头部6</th>
              <th>头部6</th>
              <th>头部6</th>
              <th>头部6</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="item in 20">
              <td class="fixed-col-1">固定1</td>
              <td class="fixed-col-2">固定2</td>
              <td></td>
              <td>内容</td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
              <td></td>
            </tr>
            
          </tbody>
        </table>
      </div>

css 复制代码

.table-container2{
    background: #fff;
    border-radius: 4px;
    margin-top: 15px;
    width: 550px;
    overflow: auto;
    min-height: 0;
    height:300px; /* 固定高度 */
    border-bottom: 0;
    border-right: 0;
      table {
        border-collapse:separate;
        // table-layout: fixed;
        width: 1000px; /* 固定寬度 */
      }
      
    
    th, td {
      color: #000;
      font-weight: 500;
      text-align: center;
      background: #fff;
      padding: 4px 2px;
      box-sizing: border-box;
      border: 1px solid #ddd;
      width: 200px;
    }
    thead{
      /* 如果是多级表头，例如两行表头 */
      tr:first-child th {
          top: 0;
          // z-index: 11; /* 更高的z-index，确保在第二级之上 */
      }
      tr:nth-child(2) th {
          /* 第二级表头的top值等于第一级的高度 */
          /* 假设第一级表头高度是28px */
          top: 28px; 
          z-index: 5; /* 稍低一点的z-index，但仍高于内容，比左侧固定的层级低 */
      }
      th {
        background: #f5f7fa;
        position: sticky;
        z-index: 4;
        top: 0;
      }
    
    }
    .fixed-col-1 {
        position: sticky !important;
        left: 0 !important;
        z-index: 6 !important;  // 最高层级，确保不被覆盖
        background: #f5f7fa !important;
        min-width: 60px;
        width: 60px;
        max-width: 60px;
      }

      .fixed-col-2 {
        position: sticky !important;
        left: 60px !important;
        z-index: 6 !important;
        background: #f5f7fa !important;
        min-width: 60px;
        width: 60px;
        max-width: 60px;
      }
      tbody {
        .fixed-col-1,
        .fixed-col-2 {
          background: #f5f7fa !important;
          z-index: 3 !important;
        }
      }
  }

演示视频