< table> ：如何< thead>在滚动过程中显示< tbody>在HTML / CSS [英] <table> : How can <thead> be displayed while scrolling through <tbody> in HTML/CSS
问题描述
我有一个大表，大约300行12列。默认情况下，在通过页面浏览表格时，不会显示< thead> 内容。我想看到它，而滚动内< tbody> 。也就是说，如果屏幕的顶部以一行开头，我想首先显示标题。
I have a big table with about 300 rows and 12 columns. While scrolling through the table by paging through the page the <thead> content is not displayed by default. I would like to see it while scrolling "within" <tbody>. That is, if the top of the screen starts with a row, I want that the header is displayed first. Otherwise it should behave like a regular table.
到目前为止，我已经看到的常见解决方案是创建一个可以自己滚动的表格（因此独立于页面滚动）。也就是说，什么
The common solution I have seen so far is to create a table that can scroll for itself (thus independently of page scrolling). That is, what answers to this question suggest.
但是，如果跨屏幕有许多列，这是不现实的，特别是因为现在有两个独立的滚动条。在移动设备上，第二个滚动条占用了很多宝贵的空间。它也非常刺激使用。你不能简单地通过，但你必须集中在打小小的滚动条。在其他浏览器上，你可以滚动触摸内部的数据，但一旦你移动到外面，另一个令人不安的运动发生...
But this is not very practical if you have many columns spanning the screen, in particular because there are now two independent scrollbars. On mobile devices the second scrollbar takes away a lot of precious space. And it is also very irritating to use. You cannot simply "leaf through", but you have to concentrate to hit that tiny scroll bar. On other browsers you can scroll touching the data within, but once you move outside, another irritating movement happens...
有干净的CSS方法吗？ / p>
Is there a clean CSS way to do this?
推荐答案
希望 position：sticky 有一天会成为这个问题的明确答案href =http://updates.html5rocks.com/2012/08/Stick-your-landings-position-sticky-lands-in-WebKit>这里的公告）像上面的评论中提到的，我是仍然着迷于制作一个简单的HTML / CSS概念验证，没有双滚动条。
Hoping that position:sticky will one day be the definitive answer to this problem (see announcement here) like mentioned in the comments above, I was still fascinated at making a simple HTML/CSS proof-of-concept, without the double scrollbars.
我的简单解决方案 - 不是一个完美的解决方案， - 没有脚本：
My simple solution — not meant to be a perfect one, more as an exercise — without scripting:
- 复制thead，一个与页面一起滚动，一个保持固定
- 使用z-index显示适当的thead
http://jsfiddle.net/willemvb/hEyZh/
这篇关于< table> ：如何< thead>在滚动过程中显示< tbody>在HTML / CSS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
