如何在可滚动的div中冻结html表的第一列和最后一列？

要在可滚动的div中冻结HTML表的第一列和最后一列，可以使用CSS样式和JavaScript代码来实现。以下是一个简单的示例：

HTML代码：

<div class="table-wrapper">
  <div class="table-scroll">
   <table>
     <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
     <tbody>
        <tr>
          <td>Row 1, Cell 1</td>
          <td>Row 1, Cell 2</td>
          <td>Row 1, Cell 3</td>
          <td>Row 1, Cell 4</td>
        </tr>
        <tr>
          <td>Row 2, Cell 1</td>
          <td>Row 2, Cell 2</td>
          <td>Row 2, Cell 3</td>
          <td>Row 2, Cell 4</td>
        </tr>
        <tr>
          <td>Row 3, Cell 1</td>
          <td>Row 3, Cell 2</td>
          <td>Row 3, Cell 3</td>
          <td>Row 3, Cell 4</td>
        </tr>
        <tr>
          <td>Row 4, Cell 1</td>
          <td>Row 4, Cell 2</td>
          <td>Row 4, Cell 3</td>
          <td>Row 4, Cell 4</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS代码：

.table-wrapper {
  position: relative;
  overflow: auto;
}

.table-scroll {
  position: relative;
  width: 100%;
  overflow: auto;
}

.table-scroll table {
  width: 100%;
  min-width: 1200px;
  border-collapse: separate;
  border-spacing: 0;
}

.table-scroll th,
.table-scroll td {
  padding: 5px 10px;
  border: 1px solid #ccc;
  background-color: #fff;
  vertical-align: top;
}

.table-scroll thead th {
  position: sticky;
  top: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

.table-scroll tfoot td {
  position: sticky;
  bottom: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

.table-scroll tbody td:first-child,
.table-scroll thead th:first-child {
  position: sticky;
  left: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

.table-scroll tbody td:last-child,
.table-scroll thead th:last-child {
  position: sticky;
  right: 0;
  background-color: #f0f0f0;
  z-index: 1;
}

这个示例中，我们使用了CSS的position: sticky属性来冻结表格的第一列和最后一列。同时，我们使用了overflow: auto属性来使表格可滚动。

需要注意的是，position: sticky属性在某些浏览器中可能不支持，因此需要使用JavaScript代码来实现冻结功能。具体实现方式可以参考以下链接：

推荐的腾讯云相关产品和产品介绍链接地址：