不规则Table得前三列如何固定

您可以使用CSS中的`position: sticky`属性来实现这个效果。具体来说，您可以将前三列的单元格包装在一个`<div>`中，并将该`<div>`的CSS样式设置为`position: sticky; left: 0;`，这样前三列就会始终固定在左侧，而其余列会跟随滚动。下面是一个基本示例：

HTML代码：

<table class="my-table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

CSS代码：

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

.my-table th,
.my-table td {
  border: 1px solid #ddd;
  padding: 8px;
}

.my-table th {
  font-weight: bold;
}

.my-table thead th {
  background-color: #f2f2f2;
}

.my-table tbody tr:nth-child(even) {
  background-color: #f2f2f2;
}

.my-table tbody tr:hover {
  background-color: #ddd;
}

.my-table-sticky {
  position: sticky;
  left: 0;
  z-index: 1;
  background-color: #fff;
}

.my-table-sticky th {
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

然后，将前三列的单元格包装在一个`<div>`中，并将该`<div>`的CSS样式设置为`my-table-sticky`，如下所示：

<table class="my-table">
  <thead>
    <tr>
      <th>Column 1</th>
      <th>Column 2</th>
      <th>Column 3</th>
      <th>Column 4</th>
      <th>Column 5</th>
      <th>Column 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>
        <div class="my-table-sticky">...</div>
      </td>
      <td>
        <div class="my-table-sticky">...</div>
      </td>
      <td>
        <div class="my-table-sticky">...</div>
      </td>
      <td>...</td>
      <td>...</td>
      <td>...</td>
    </tr>
    <!-- more rows... -->
  </tbody>
</table>

这样，前三列就会固定在左侧，而其余列会跟随滚动。