一个同时具有粘性表头和粘性首列的表格

我们已经介绍过 单个<table>单元格、<th>和<td>可以是position: sticky。使表格的表头在滚动浏览大量行时粘贴到屏幕顶部非常容易（例如 此演示）。

但是，粘性不仅仅适用于屏幕顶部，您可以在任何滚动方向上粘贴内容（水平滚动 同样有趣）。事实上，我们可以在同一个元素内部拥有多个粘性元素，它们分别粘贴在不同的方向上，甚至可以拥有在多个方向上粘贴的单个元素。

这是一个同时粘贴表头和首列的表格的视频示例

为什么要这样做？**特别是对于以交叉引用为目的的表格数据。**在此表格中（当然，它表示棒球比赛的得分情况，不知何故有20支球队同时进行比赛，因为棒球就是这样运作的），您不希望球队名称或局数滚动消失是有道理的，因为您会失去对所查看内容的上下文。

并非所有表格都需要双向交叉引用。许多表格可以在小屏幕上 将行拆分为块，以获得更好的小屏幕体验。

这里使用的“技巧”部分在于position: sticky;的使用，但对我来说更多的是如何处理重叠元素。粘性表格单元格需要有背景，否则我们会看到重叠的内容。它还需要适当的z-index处理，以便当它粘贴到位时，它将位于它应该位于其顶部的元素之上。这感觉是最棘手的部分

• 确保tbody>th单元格位于普通表格单元格之上，以便它们在水平滚动期间保持在顶部。
• 确保thead>th单元格位于这些单元格之上，以进行垂直滚动。
• 确保thead>th:first-child单元格位于最顶层，因为它需要位于主体单元格及其同级表头之上以进行水平滚动。

有点像跳舞，但可以做到。

感谢 Cameron Clark 通过邮件向我 演示了这一点 并向我展示了它有多酷。确实，Cameron，它很酷。当我与他人分享时，Estelle Weyl 向我展示了她几年前制作的 演示。这感觉很正常，Estelle 总是比我领先几年。