如果使用一个table实现部分列冻结并且不随着横向滚动条移动

要实现部分列冻结并且不随着横向滚动条移动，可以使用 CSS 的 position 属性和 z-index 属性来实现。

首先，将表格分为两个部分，左边是需要冻结的列，右边是不需要冻结的列。然后将左边的表格使用 position: fixed; 和 z-index: 1; 属性进行固定定位，并设置宽度和表头行高。同时，将右边的表格使用 margin-left 属性将其向右移动与左边表格相同的距离，并设置 z-index: 0; 属性。

具体代码如下：

HTML:

<div class="table-wrapper">
  <table class="left-table">
    <thead>
      <tr>
        <th>Column 1</th>
        <th>Column 2</th>
        <th>Column 3</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Row 1, Column 1</td>
        <td>Row 1, Column 2</td>
        <td>Row 1, Column 3</td>
      </tr>
      <tr>
        <td>Row 2, Column 1</td>
        <td>Row 2, Column 2</td>
        <td>Row 2, Column 3</td>
      </tr>
    </tbody>
  </table>
  <table class="right-table">
    <thead>
      <tr>
        <th>Column 4</th>
        <th>Column 5</th>
        <th>Column 6</th>
        <th>Column 7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <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 4</td>
        <td>Row 2, Column 5</td>
        <td>Row 2, Column 6</td>
        <td>Row 2, Column 7</td>
      </tr>
    </tbody>
  </table>
</div>

CSS:

.table-wrapper {
  position: relative;
  overflow-x: scroll;
}

.left-table {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  width: 200px;
  border-collapse: collapse;
  background-color: #fff;
}

.right-table {
  margin-left: 200px;
  z-index: 0;
  border-collapse: collapse;
}

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

th {
  background-color: #f2f2f2;
  height: 50px;
}

在上面的代码中，我们将两个表格放在一个包裹 div 中，并将 div 的 overflow-x 属性设置为 scroll，以便在表格宽度超出 div 宽度时出现横向滚动条。

左边的表格使用 position: fixed; 和 z-index: 1; 属性进行固定定位，并设置宽度和表头行高。右边的表格使用 margin-left 属性将其向右移动与左边表格相同的距离，并设置 z-index: 0; 属性。

这样，左边的列就会被冻结在页面上方，不会随着横向滚动条移动，而右边的列则会随着横向滚动条移动。