在Chrome中使用粘性页眉和页脚制作表格变得更容易的新方法介绍

在这篇文章中，我从未在任何<thead> 、<tfoot> 或<tr> 元素上使用过position: sticky ，因为即使Safari和Firefox可以做到这一点，Chrome却不能。但它可以做表格单元，如<th> 和<td> ，这是一个很好的解决方法。

这一点已经改变了：

我通过Twitter听说Chrome在v91.https://t.co/vTBplXWWtT中 "重写了表格"。

我看到它掉下来了，就升级了，并做了一个快速测试。嘿嘿，看看粘稠的表头和表脚。@CodePen t.co/8eCP1GMer0

(在Safari和Firefox中也能使用）pic.twitter.com/rBN3bXm5iD

- Chris Coyier (@chriscoyier)6月4日, 2021

听起来，在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> 、 第一和最后一列都是粘性的。