HTML table 带有两个粘性列和 headers（仅使用 CSS）

Question

我正在努力获得两个固定列和 headers 使用 HTML table + 可滚动 body。我搜索了很多并找到了这些方法：

this (only 1 fixed column/header)
和this (only 1 fixed column/header; no table markup)
我也 created my own solution 使用了一个库，它工作正常，但我不喜欢 html table 标签标记变得混乱，而且初始化colModal 不是很好，因为我有动态数量的列。

由于我对这些解决方案中的任何一个都不满意，我想知道是否有机会仅使用 CSS 来完成这项工作？

Answer 1

我认为仅使用 CSS 不可能达到我想要的效果。所以我找到了另一个名为 TableHeadFixer 的库，它不会在您的 HTML 标记中重复节点和 ID。

所以我想出了这个最终解决方案： https://jsfiddle.net/4s53f124/2/

你所要做的就是调用库的tableHeadFixer方法（如果你想进行一些CSS调整）：

 $(document).ready(function () {
     $("#fixTable").tableHeadFixer({"left": 2});
 });

Answer 2

离我最近的是this。

无 HTML table 标记且无 IE 支持。我在 header 和第一列上使用了 position: sticky。

table 的尺寸是可变的，但需要提供单元格的宽度。

Answer 3

仅使用 html 和 css 执行此操作的一种方法是在添加前两列的第一列中添加第二个 table，并对body。也许不是最优雅的解决方案，但它可以用纯 html 和 css.

完成工作

thead tr>th {
  background: #eee;
  position: sticky;
  padding: .5rem;
  z-index: 2;
  top: 0;
  border-bottom: 1px solid black;
}

.sticky-column {
  border-right: 1px solid black;
}

.sticky-column tr>th {
  border-bottom: 0px solid black;
}

thead tr>.sticky-column {
  z-index: 3;
  left: 0;
  top: 0;
}

tbody tr>.sticky-column {
  background: #fff;
  position: sticky;
  z-index: 1;
  left: 0;
}

<table id="board">
  <thead>
    <tr>
      <th class="sticky-column">
        <table>
          <tr>
            <th> <strong>Column 1</strong>
            </th>
            <th>
              <strong>Column 2</strong>
            </th>
          </tr>
        </table>
      </th>
      <th>
        <strong>Column 3</strong>
      </th>
      <th>
        <strong>Column 4</strong>
      </th>
      <th>
        <strong>Column 5</strong>
      </th>
      <th>
        <strong>Column 6</strong>
      </th>
      <th>
        <strong>Column 7</strong>
      </th>
      <th>
        <strong>Column 8</strong>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>

    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>

    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>
    <tr>
      <td class="sticky-column">
        <table>
          <tr>
            <td>
              Content 1
            </td>
            <td>
              Content 2
            </td>
          </tr>
        </table>
      </td>
      <td>
        Content 3
      </td>
      <td>
        Content 4
      </td>
      <td>
        Content 5
      </td>
      <td>
        Content 6
      </td>
      <td>
        Content 7
      </td>
      <td>
        Content 8
      </td>

    </tr>

  </tbody>
</table>

HTML table 带有两个粘性列和 headers（仅使用 CSS）

HTML table with two sticky columns and headers (using only CSS)

html

css

css-tables

fixed-header-tables