html - 是否有 css3 方法来修复 y 轴上的 <thead>，让它在 x 轴上滚动？

这已经被问了无数次: here 、 there, 和 the other place 就在 SO 上。然而，我找不到真正好的答案。

通常我的表格在垂直方向上比视口(viewport)深得多。我希望能够滚动表的 <tbody> 而其 <thead> 保持固定和可见。其中一些表格也比视口(viewport)宽得多。在这里，我希望表格的 <thead> 水平滚动。

为了获得效果，我有几十行 JS，包括用于检查 setInterval( ) 和 scrollLeft 的 scrollTop 调用，以便我可以重新定位 <thead> 1 的副本。它可以工作，但它是一个巨大的、笨拙的、脆弱的和无法维护的痛苦。

问题: 是否有一些直接的 css3 方式，存在的或新兴的或提议的，我可以使用它来获取表格的 <thead> 和 <tbody> 以水平和垂直滚动，但彼此独立？
谢谢!

1 为什么是 setInterval( ) ？因为 IE 不统一传递 onScroll 事件，你傻；每个人都知道!

最佳答案

一种肮脏的方法是将标题表放在一个单独的 div 中，例如:

<div class="header">
<table>
    <thead><tr><td>#</td><td>v</td></tr></thead>
</table>
</div>

然后 body 在另一个 div 像:

<div class="body">
    <table>
        <tbody>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
            <tr><td>1</td><td>a</td></tr>
    </tbody>
</table>
</div>

现在你可以给 body div 一个固定的高度并将 oveflow 设置为 auto 。喜欢:

table{border:0px solid #ccc;height:30px;}
table tr td{border:1px solid #ccc;padding:5px;}
div.body{height:70px;overflow:auto;border-bottom:1px solid #ccc;}

这是我在 jsfiddle 中所做的一个工作示例

关于html - 是否有 css3 方法来修复 y 轴上的 <thead>，让它在 x 轴上滚动？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/5703393/