:在HTML / CSS中滚动时如何显示

我有一个大约300行12列的大桌子.通过在页面翻页来滚动表格时,< thead>认情况下不显示内容.我想在滚动“内部”< tbody>时看到它.也就是说,如果屏幕顶部以一行开头,我希望首先显示标题.否则它应该像常规表一样.

到目前为止我看到的常见解决方案是创建一个可以自行滚动的表(因此与页面滚动无关).也就是说,answers to this question建议.

但是如果跨越屏幕有很多列,这不是很实用,特别是因为现在有两个独立的滚动条.在移动设备上,第二个滚动条带走了大量宝贵空间.而且使用它也很烦人.你不能简单地“翻身”,但你必须集中精力去击中那个小小的滚动条.在其他浏览器上,你可以滚动触摸其中的数据,但一旦你移出外面,另一个恼人的运动发生……

一个干净的CSS方式来做到这一点?

解决方法

希望这个位置:粘性有一天会成为这个问题的最终答案(见 announcement here),如上面的评论所述,我仍然着迷于制作一个简单的HTML / CSS概念验证,没有双滚动条.

我的简单解决方案 – 不是一个完美的解决方案,更像是一个练习 – 没有脚本:

>复制thead,一个滚动页面,一个保持固定
>使用z-index来显示相应的thead

http://jsfiddle.net/willemvb/hEyZh/

相关文章

vue阻止冒泡事件 阻止点击事件的执行 &lt;div @click=&a...
尝试过使用网友说的API接口获取 找到的都是失效了 暂时就使用...
后台我拿的数据是这样的格式: [ {id:1 , parentId: 0, name:...
JAVA下载文件防重复点击,防止多次下载请求,Cookie方式快速简...
Mip是什么意思以及作用有哪些