创建一个可以滑动的表格固定第一列

要创建一个可以滑动的表格并固定第一列，您可以使用HTML、CSS和JavaScript结合实现。具体步骤如下：

1. 创建一个具有固定表头和固定第一列的表格，并将其放置在一个可滚动的div容器内。

2. 使用CSS将表格的第一列设置为固定定位，并将其左侧的边框设置为与表头对齐。

3. 使用JavaScript监听滚动事件，并将表头的位置设置为固定在容器的顶部，将第一列的位置设置为固定在容器的左侧。

下面是一个示例代码：

HTML：

<div class="table-container">
  <table>
    <thead>
      <tr>
        <th>Header 1</th>
        <th>Header 2</th>
        <th>Header 3</th>
        <th>Header 4</th>
        <th>Header 5</th>
        <th>Header 6</th>
        <th>Header 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
        <td>Row 1, Column 4</td>
        <td>Row 1, Column 5</td>
        <td>Row 1, Column 6</td>
        <td>Row 1, Column 7</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
        <td>Row 2, Column 4</td>
        <td>Row 2, Column 5</td>
        <td>Row 2, Column 6</td>
        <td>Row 2, Column 7</td>
      </tr>
      <!-- more rows -->
    </tbody>
  </table>
</div>

CSS：

.table-container {
  overflow-x: auto;
  max-width: 100%;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  padding: 8px;
  text-align: left;
  border-bottom: 1px solid #ddd;
}

th {
  background-color: #f2f2f2;
}

th:first-child,
td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid #ddd;
}

JavaScript：

$('.table-container').scroll(function() {
  var $this = $(this),
      $th = $this.find('thead th:first-child'),
      $td = $this.find('tbody td:first-child');
  $th.css('left', $this.scrollLeft());
  $td.css('top', $this.scrollTop());
});

请注意，这只是一个示例代码，具体实现方式可能因表格结构和样式而异。