固定表头+第一列+最后一列

效果图

代码

<html>

<body>
  <div class='table-test'>
    <table class='scorll-table'>
      <thead>
        <tr class="sticky-row">
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
          <th>列4</th>
          <th>列5</th>
          <th>列6</th>
          <th>列7</th>
          <th>列8</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td>数据1x1</td>
          <td>数据1x2</td>
          <td>数据1x3</td>
          <td>数据1x4</td>
          <td>数据1x5</td>
          <td>数据1x6</td>
          <td>数据1x7</td>
          <td>数据1x8</td>
        </tr>
        <tr>
          <td>数据2x1</td>
          <td>数据2x2</td>
          <td>数据2x3</td>
          <td>数据2x4</td>
          <td>数据2x5</td>
          <td>数据2x6</td>
          <td>数据2x7</td>
          <td>数据2x8</td>
        </tr>
        <tr>
          <td>数据3x1</td>
          <td>数据3x2</td>
          <td>数据3x3</td>
          <td>数据3x4</td>
          <td>数据3x5</td>
          <td>数据3x6</td>
          <td>数据3x7</td>
          <td>数据3x8</td>
        </tr>
        <tr>
          <td>数据4x1</td>
          <td>数据4x2</td>
          <td>数据4x3</td>
          <td>数据4x4</td>
          <td>数据4x5</td>
          <td>数据4x6</td>
          <td>数据4x7</td>
          <td>数据4x8</td>
        </tr>
        <tr>
          <td>数据5x1</td>
          <td>数据5x2</td>
          <td>数据5x3</td>
          <td>数据5x4</td>
          <td>数据5x5</td>
          <td>数据5x6</td>
          <td>数据5x7</td>
          <td>数据5x8</td>
        </tr>
        <tr>
          <td>数据6x1</td>
          <td>数据6x2</td>
          <td>数据6x3</td>
          <td>数据6x4</td>
          <td>数据6x5</td>
          <td>数据6x6</td>
          <td>数据6x7</td>
          <td>数据6x8</td>
        </tr>
      </tbody>
    </table>
  </div>
</body>
<style>
  .table-test {
    width: 100%;
    height: 150px;
    overflow: auto;
  }

  .sticky-row {
    position: sticky;
    top: 0;
    background-color: #00fd98;
    z-index: 2;
  }

  .scorll-table {
    width: 100%;
    min-width: max-content;
    border-spacing: 0;
    color: #333;
    font-size: 12px;
  }

  th,
  td {
    padding: 5px 10px;
    border: 1px solid #ccc;
    text-align: center;
    width: 150px;
  }

  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    background-color: #00bdfd;
    z-index: 1
  }

  th:last-child,
  td:last-child {
    position: sticky;
    right: 0;
    background-color: #00bdfd;
    z-index: 1
  }

  th:first-child,
  th:last-child {
    background-color: #00fd98;
  }

  thead tr:first-child th {
    border-top: 1px solid #ccc;
  }
</style>

</html>