1. 首页
  2. css

CSS制作带有粘性页眉和页脚的表格变得更容易了

不久前,当我在博客中看到HTML中的粘性页眉和页脚时,一个表同时有粘性页眉和粘性第一列。在它里面,我从来没有在任何、或元素上使用position: sticky,因为即使Safari和Firefox可以做到这一点,Chrome也做不到。但是它可以做表格单元格,比如和,这是一个相当不错的解决办法。
好吧,这已经改变了。
我通过Twitter听说Chrome在v91中\”重写了表格\”。https://t.co/vTBplXWWtT
我看到它掉了下来,升级了,然后做了一个快速测试。嘿,看看有粘性的表格页眉和页脚。@CodePenhttps://t.co/8eCP1GMer0
(也适用于Safari和Firefox)pic.twitter.com/rBN3bXm5iD-Chris Coyier(@chriscoyier)2021年6月4日
听起来像是花了很大的力气彻底改造了Chromium渲染引擎中的表,使表加速。不只是粘性被固定了,还有各种各样的东西。我只想把重点放在有粘性的东西上,因为我就是这么看的。
我的标题是和是有粘性的。这似乎是这里最常见的用例。
table thead,table tfoot {position: sticky;}table thead {inset-block-start: 0; /* \”top\” */}table tfoot {inset-block-end: 0; /* \”bottom\” */}CodePen Embed Fallback
,适用于所有三种主流浏览器。你可能想变得聪明,只在某些最小的视口高度或其他地方粘贴它们,但关键是它是有效的。
我也听到了一些关于表列的问题。我原来的文章有一个棘手的第一栏(这是点)。虽然有一个表标签,它是…奇怪。它实际上并不包装列,它更像是一个指针的东西,如果你需要的话,可以对列进行样式化。我几乎看不到它被使用过,但它就在那里。不管怎样,你完全不可能,但是你可以做粘性列。您需要选择该列中的所有单元格并将它们粘贴到左侧或右侧。这里是使用逻辑属性…
table tr th:first-child {position: sticky;inset-inline-start: 0; /* \”left\” */}
这里是一个有点讨厌的表,其中、、和的第一列和最后一列都是粘性的。CodePen嵌入回退
我相信你可以用这个做一些有品位的事情。比如:
一个\”粘滞的\”表行/列可以是一种很好的触感。这里有一个来自@destroytoday的例子https://t.co/uN3nIisHxFpic.twitter.com/KttE5puBqZ-Chris Coyier(@chriscoyier)2021年6月2日

CSS制作带有粘性页眉和页脚的表格变得更容易了 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%88%b6%e4%bd%9c%e5%b8%a6%e6%9c%89%e7%b2%98%e6%80%a7%e9%a1%b5%e7%9c%89%e5%92%8c%e9%a1%b5%e8%84%9a%e7%9a%84%e8%a1%a8%e6%a0%bc%e5%8f%98%e5%be%97%e6%9b%b4%e5%ae%b9%e6%98%93%e4%ba%86/