html 表格第一列在表格左右滑动的时候固定不动

您可以通过CSS的`position`属性和`z-index`属性来实现表格第一列固定不动。具体实现步骤如下：

1. 在表格的`<thead>`和`<tbody>`标签中分别为第一列添加一个`<th>`和`<td>`标签，并设置相应的样式。

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>固定列</td>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>固定列</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    ...
  </tbody>
</table>

2. 为表格的`<thead>`标签和`<tbody>`标签设置`display: block`属性，并设置表格的宽度和高度。

thead, tbody {
  display: block;
  width: 100%;
  height: 200px;
}

3. 为表格的`<tbody>`标签设置`overflow-y: scroll`属性，使其在纵向滚动时出现滚动条。

tbody {
  overflow-y: scroll;
}

4. 为表格的第一列`<th>`和`<td>`标签设置`position: sticky`属性和`left: 0`属性，使其固定在左侧。

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

这样就可以实现表格第一列固定不动了。完整的代码如下所示：

<style>
  table {
    border-collapse: collapse;
    width: 100%;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
    text-align: left;
  }
  th:first-child,
  td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: #fff;
  }
  thead, tbody {
    display: block;
    width: 100%;
    height: 200px;
  }
  tbody {
    overflow-y: scroll;
  }
</style>

<table>
  <thead>
    <tr>
      <th>固定列</th>
      <th>列1</th>
      <th>列2</th>
      <th>列3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>固定列</td>
      <td>内容1</td>
      <td>内容2</td>
      <td>内容3</td>
    </tr>
    <tr>
      <td>固定列</td>
      <td>内容4</td>
      <td>内容5</td>
      <td>内容6</td>
    </tr>
    ...
  </tbody>
</table>