table 固定第一列和 固定表头 top：0未生效

要实现固定第一列和固定表头的效果，需要使用CSS的position和overflow属性。具体来说，可以将表格包裹在一个div中，将div的position设为relative，然后将表头和第一列分别放在两个div中，将它们的position设为absolute。接着，设置这两个div的宽度和高度，让它们固定在表格的左上角。最后，将表格的overflow设为auto，让它可以滚动。

下面是示例代码：

HTML代码：

<div class="table-wrapper">
  <div class="header-wrapper">
    <table>
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
          <th>Header 4</th>
        </tr>
      </thead>
    </table>
  </div>
  <div class="body-wrapper">
    <table>
      <tbody>
        <tr>
          <td>1</td>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
        <tr>
          <td>5</td>
          <td>6</td>
          <td>7</td>
          <td>8</td>
        </tr>
        <tr>
          <td>9</td>
          <td>10</td>
          <td>11</td>
          <td>12</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS代码：

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

.header-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  background-color: #fff;
}

.body-wrapper {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: calc(100% - 40px);
  overflow-y: scroll;
}

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

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

th {
  background-color: #f2f2f2;
  font-weight: bold;
  position: sticky;
  top: 0;
  z-index: 1;
}

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

在上面的代码中，我们将表格包裹在一个名为.table-wrapper的div中。表头和第一列分别放在.header-wrapper和.body-wrapper中。我们使用了position: sticky属性来实现固定表头和第一列的效果。注意，在实现固定第一列时，我们需要将第一列的背景色设为表头的背景色，以避免出现重叠的情况。