让表格拥有粘性表头和表尾变得更容易

不久前，我在博文 带粘性表头和粘性第一列的表格 中查看了 HTML <table> 中的粘性表头和表尾。在其中，我从未在任何 <thead>、<tfoot> 或 <tr> 元素上使用 position: sticky，因为即使 Safari 和 Firefox 可以这样做，Chrome 也无法做到。但它可以使用像 <th> 和 <td> 这样的表格单元格，这是一个足够好的变通方法。

现在情况发生了变化。

我通过 Twitter 获悉 Chrome 在 v91 中“重写了表格”。https://#/vTBplXWWtT

我看到了它的下降、升级，并进行了快速测试。嘿，看看粘性表格标题和页脚。@CodePen https://#/8eCP1GMer0

（在 Safari 和 Firefox 中也有效） pic.twitter.com/rBN3bXm5iD

— Chris Coyier (@chriscoyier) 2021年6月4日

听起来 Chromium 中的渲染引擎对表格进行了彻底的改进，从而提高了表格的速度。修复的不仅仅是粘性问题，还有 各种其他问题。我只会关注粘性问题，因为这是我关注的重点。

对我来说，重点是 <thead> 和 <tfoot> 可以设置为粘性。这似乎将是这里最常见的用例。

table thead,
table tfoot {
  position: sticky;
}
table thead {
  inset-block-start: 0; /* "top" */
}
table tfoot {
  inset-block-end: 0; /* "bottom" */
}

这在所有三个主要浏览器中都有效。您可能想要变得聪明一点，只在某些最小视口高度下将它们设置为粘性，但重点是它有效。

我还听到了一些关于表格列的问题。我最初的文章有一个粘性第一列（这有点像重点）。虽然有一个表格 <col> 标签，但它……很奇怪。它实际上并没有包裹列，更像是用于在需要时向下设置列样式的指针。我几乎从未见过它被使用，但它确实存在。无论如何，您绝对无法使用 position: sticky; 设置 <col> 的样式，但您可以创建粘性列。您需要选择该列中的所有单元格，并将它们粘贴到左侧或右侧。以下是如何使用逻辑属性来实现这一点……

table tr th:first-child {
  position: sticky;
  inset-inline-start: 0; /* "left" */
}

这是一个有点讨厌的表格，其中 <thead>、<tfoot>以及第一列和最后一列都是粘性的。

我相信你可以用它做一些有品位的事情。比如也许

粘性表格行/列可以是一个很好的补充。以下是一个来自 @destroytoday 的示例 https://#/uN3nIisHxF pic.twitter.com/KttE5puBqZ

— Chris Coyier (@chriscoyier) 2021年6月2日