纯css上带有固定标题和固定列的表格 [英] Table with fixed header and fixed column on pure css

问题描述

我需要创建一个带有固定标题和固定第一列的 html 表格(或类似的东西).

目前我看到的每个解决方案都使用 Javascript 或 jQuery 来设置 scrollTop/scrollLeft，但它在移动浏览器上运行不顺畅，所以我正在寻找纯 CSS 解决方案.

我在这里找到了一个固定列的解决方案:jsfiddle.net/C8Dtf/20/ 但是我不知道如何增强它以修复标题.

我希望它在 webkit 浏览器上工作或使用一些 css3 功能，但我再说一遍，我不想使用 Javascript 进行滚动.

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

解决方案

带有固定标题行和第一列的纯 CSS 解决方案

position:sticky 属性支持在 Chrome、Firefox 和 Edge 的现代版本中粘贴到顶部和侧面.这可以与具有 overflow: scroll 属性的 div 结合使用，为您提供一个带有固定标题的表格，可以放置在页面上的任何位置.

把你的桌子放在一个容器里:

<table></table>

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

div.container {溢出:滚动；}

正如 Dagmar 在评论中指出的那样，容器还需要 max-width和一个 max-height.

使用 position:sticky 使表格单元格粘在边缘和 top、right 或 left选择要坚持的边缘:

thead th {位置:-webkit-sticky；/* 对于 Safari */位置:粘性；顶部:0；}身体 th {位置:-webkit-sticky；/* 对于 Safari */位置:粘性；左:0；}

如评论中提到的MarredCheese，如果您的第一列包含<td>元素而不是 <th> 元素，您可以在 CSS 中使用 tbody td:first-child 而不是 tbody th

要将第一列中的标题保持在左侧，请使用:

thead th:first-child {左:0；z-索引:1；}

/* 在容器上使用 overflow:scroll 以启用滚动:*/div {最大宽度:400px；最大高度:150px；溢出:滚动；}/* 使用 position:sticky 让它粘在边缘* 和顶部、右侧或左侧选择要坚持的边缘:*/头 th {位置:-webkit-sticky；/* 对于 Safari */位置:粘性；顶部:0；}身体 th {位置:-webkit-sticky；/* 对于 Safari */位置:粘性；左:0；}/* 使第一列中的标题保持在左侧:*/第一个:第一个孩子{左:0；z-索引:2；}/* 只是为了很好地显示它:*/头 th {背景:#000；颜色:#FFF；/* 确保它保持在 tbody th {} 中的模拟边界上方:*/z-索引:1；}身体 th {背景:#FFF；右边框:1px 实心 #CCC；/* 浏览器倾向于在粘性元素上放置边框，因此我们使用 box-shadow 模拟边框右侧以确保它保持不变:*/框阴影:1px 0 0 0 #ccc；}桌子 {边框折叠:折叠；}天，第 {填充:0.5em；}

<表格><头><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><tr><th>head</th><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td></tr><tr><th>head</th><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td></tr><tr><th>head</th><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td></tr><tr><th>head</th><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td></tr><tr><th>head</th><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td></tr><tr><th>head</th><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td><td>身体</td></tr></tbody>

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

I need to create a html table (or something similar looking) with a fixed header and a fixed first column.

Every solution I've seen so far uses Javascript or jQuery to set scrollTop/scrollLeft, but it doesn't work smoothly on mobile browsers, so I'm looking for a pure CSS solution.

I found a solution for a fixed column here: jsfiddle.net/C8Dtf/20/ but I don't know how I can enhance it to make the header fixed too.

I want it to work on webkit browsers or use some css3 features, but I repeat, I don't want to use Javascript for scrolling.

EDIT: This is example of the behaviour I want to achieve: https://web.archive.org/web/20130829032141/http://datatables.net/release-datatables/extras/FixedColumns/css_size.html

解决方案

A pure CSS solution with a fixed header row and first column

The position: sticky property supports both sticking to the top and to the side in modern versions of Chrome, Firefox, and Edge. This can be combined with a div that has the overflow: scroll property to give you a table with fixed headers that can be placed anywhere on your page.

Place your table in a container:

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

Use overflow: scroll on your container to enable scrolling:

div.container {
  overflow: scroll;
}

As Dagmar pointed out in the comments, the container also requires a max-width and a max-height.

Use position: sticky to have table cells 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;
}

As MarredCheese mentioned in the comments, if your first column contains <td> elements instead of <th> elements, you can use tbody td:first-child in your CSS instead of tbody th

To have the header in the first column stick to the left, use:

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/

这篇关于纯css上带有固定标题和固定列的表格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！