CSS实现固定首列和表头

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <title>首行首列固定</title>
  <style>
    /*外层div，设置宽高度*/
    div {
      width: 90vw;
      height: 90vh;
      border: 1px solid #dcdee2;
      overflow: auto;
    }

    table {
      border-collapse: separate;
      /*设置边框会被分开，而不是合并*/
      table-layout: fixed;
      /*列宽由表格宽度和列宽度设定。*/
      width: 100%;
      word-wrap: break-word;
    }

    td,
    th {
      border-right: 1px solid #dcdee2;
      border-bottom: 1px solid #dcdee2;
      height: 30px;
      text-align: center;
      background-color: #fff;
    }

    /* 固定表头 */
    thead {
      position: sticky;
      top: 0;
      z-index: 1000;
    }

    /* th {
      background-color: #ccc;
    } */

    /* 首列 */
    tbody tr td:first-child {
      position: sticky;
      left: 0;
      z-index: 100;
    }

    /* 最左上角 */
    .t1 {
      position: sticky;
      left: 0;
      z-index: 1000;
    }

    .shadow-y {
      height: 90vh;
      width: 2px;
      position: absolute;
      top: 0px;
      right: 0;
      z-index: 10000;
      box-shadow: 2px 0 2px 0px rgba(0, 0, 0, 0.2);
    }

    .shadow-x {
      height: 2px;
      width: 90vw;
      position: absolute;
      bottom: 0;
      left: 0;
      z-index: 10000;
      box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.2);
    }
  </style>
</head>

<body>
  <div>
    <table cellspacing="0" cellpadding="0">
      <colgroup>
        <col style="width: 150px" />
        <col style="width: 150px" />
        <col style="width: 142px" />
        <col style="width: 141px" />
        <col style="width: 180px" />
        <col style="width: 150px" />
        <col style="width: 144px" />
        <col style="width: 140px" />
        <col style="width: 144px" />
        <col style="width: 144px" />
        <col style="width: 144px" />
        <col style="width: 144px" />
      </colgroup>
      <thead>
        <tr>
          <th rowspan="4" class="t1">
            最左上角
            <span class="shadow-y"></span>
            <span class="shadow-x"></span>
          </th>
          <th colspan="2">一级表头</th>
          <th colspan="5">一级表头</th>
          <th>一级表头</th>
          <th>一级表头</th>
          <th>一级表头</th>
          <th>一级表头</th>
        </tr>
        <tr>
          <!-- 必须 style="z-index: 10;" 值小于最左上角的-->
          <th style="z-index: 10;">二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
          <th>二级表头</th>
        </tr>
        <tr>
          <!-- 必须 style="z-index: 10;" 值小于最左上角的-->
          <th colspan="4" style="z-index: 10;">三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
          <th>三级表头</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>首列</td>
          <td>text2222222222222222222222222222</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
        <tr>
          <td>首列</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
          <td>text</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>

</html>