具有固定标题和特定列数（与IE 11兼容）的可滚动（水平和垂直）HTML表

Question

我有需要固定标题，固定特定列数，垂直和水平滚动以及与IE 11兼容的HTML表。

我已经尝试过此插件https://yidas.github.io/jquery-freeze-table/，但在IE 11中运行速度非常慢。

可能的解决方案是使用固定列，并在每15行之后使用重复标题水平和垂直滚动。

Answer 1

您可以使用纯CSS实现此功能：

这里是小提琴：

.table {
  max-width: 350px;
  max-height: 200px;
  overflow: scroll;
}

tbody th {
  position: sticky;
  position: -webkit-sticky;
  left: 0;
}

thead th {
  position: -webkit-sticky;
  top: 0;
  position: sticky;
}

thead th:first-child {
  left: 0;
  z-index: 1;
}

thead th {
  background: yellow;
  color: #FFF;
}

tbody th {
  background: red;
  border-right: 1px solid #ddd;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 0.5em;
}

<div class="table">
  <table>
    <thead>
      <tr>
        <th></th>
        <th>col1</th>
        <th>col2</th>
        <th>col3</th>
        <th>col4</th>
        <th>col5</th>
        <th>col6</th>
        <th>col7</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>dfgdf</th>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <th>dfgdf</th>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <th>dfgdf</th>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <th>dfdf</th>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <th>dfgdf</th>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
      <tr>
        <th>fgdf</th>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
        <td>test</td>
      </tr>
    </tbody>
  </table>
</div>