html - 在纯CSS上具有固定标题和固定列的表

我需要创建一个具有固定标题和固定第一列的html表(或类似外观的表)。

到目前为止，我所见过的每个解决方案都使用Javascript或jQuery来设置scrollTop / scrollLeft，但是在移动浏览器上无法正常工作，因此我正在寻找一种纯CSS解决方案。

我在这里找到了固定列的解决方案:jsfiddle.net/C8Dtf/20/，但我不知道如何增强它以使 header 也固定。

我希望它可以在Webkit浏览器上运行或使用一些css3功能，但是我重复一遍，我不想使用Javascript进行滚动。

编辑:这是我要实现的行为的示例:https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

最佳答案

具有固定标题行和第一列的实际纯CSS解决方案
我必须使用纯CSS创建一个既有固定标题又有固定第一列的表，而这里的答案都不是我想要的。position: sticky属性既支持粘贴在顶部(如我所见，使用最多)，又支持粘贴在现代版本的Chrome，Firefox和Edge中。可以将它与具有div属性的overflow: scroll结合使用，为您提供带有固定标题的表，该表可以放在页面的任何位置:
将表格放在容器中:

<div class="container">
  <table></table>
</div>

在容器上使用overflow: scroll启用滚动:

div.container {
  overflow: scroll;
}

正如Dagmar在注释中指出的那样，容器还需要max-width和max-height。
使用position: sticky可以使表格单元格贴在边缘上，而top，right或left可以选择贴在哪个边缘上:

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}

正如注释中提到的MarredCheese一样，如果您的第一列包含<td>元素而不是<th>元素，则可以在CSS中使用tbody td:first-child而不是tbody th要使第一列中的标题停留在左侧，请使用:

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

/* Use overflow:scroll on your container to enable scrolling: */

div {
  max-width: 400px;
  max-height: 150px;
  overflow: scroll;
}


/* Use position: sticky to have it stick to the edge
 * and top, right, or left to choose which edge to stick to: */

thead th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  top: 0;
}

tbody th {
  position: -webkit-sticky; /* for Safari */
  position: sticky;
  left: 0;
}


/* To have the header in the first column stick to the left: */

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


/* Just to display it nicely: */

thead th {
  background: #000;
  color: #FFF;
  /* Ensure this stays above the emulated border right in tbody th {}: */
  z-index: 1;
}

tbody th {
  background: #FFF;
  border-right: 1px solid #CCC;
  /* Browsers tend to drop borders on sticky elements, so we emulate the border-right using a box-shadow to ensure it stays: */
  box-shadow: 1px 0 0 0 #ccc;
}

table {
  border-collapse: collapse;
}

td,
th {
  padding: 0.5em;
}

<div>
  <table>
    <thead>
      <tr>
        <th></th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
        <th>headheadhead</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
      <tr>
        <th>head</th>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
        <td>body</td>
      </tr>
    </tbody>
  </table>
</div>

https://jsfiddle.net/qwubvg9m/1/