是否有CSS3方式修复< thead>在y轴上，让它在x轴上滚动? [英] Is there a css3 way to fix a <thead> on the y-axis, let it scroll on the x-axis?

问题描述

已经被无数次询问: 此处 ， 有，和 另一个地方 就这样.但是我找不到真正的好答案.

This has been asked a zillion times: here, there, and the other place just on SO. Yet there's no real good answer that I can find.

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

<recap> Often I have tables that are vertically much deeper than the viewport. I'd like to be able to scroll the table's <tbody> while its <thead> remains fixed and visible. Some of these tables are also much wider than the viewport. Here I want the table's <thead> to scroll horizontally.

要获得效果，我有数十行JS，其中包括setInterval( )调用以检查scrollLeft和scrollTop，以便可以重新放置>的副本 sup> 1 .它可以工作，但是却是一个巨大的，笨拙的，脆弱的，无法维持的痛苦.</recap>

To get the effect, I have dozens of lines of JS, including setInterval( ) calls to check scrollLeft and scrollTop, so that I can reposition a copy of <thead>¹. It works but it's a huge, ungainly, frail and unmaintainable pain in the ass.</recap>

问题:是否存在一些简单的css3方式(存在，新兴或提议)，我可以使用该方式获取表的<thead>和<tbody>进行水平和垂直滚动，但彼此独立其他? 谢谢！

Question: Is there some straightforward css3 way, existent or emerging or proposed, that I can use to get a a table's <thead> and <tbody> to scroll horizontally and vertically, yet independently of each other? Thanks!

¹ 为什么是setInterval( )?因为IE不能统一传递onScroll事件，所以您很愚蠢； 每个人都知道！

¹ Why setInterval( )? Because IE doesn't uniformly deliver onScroll events, you silly; everybody knows that!

推荐答案

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

a dirty way would be to put the header table in a separate div like:

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

然后将身体放在另一个div中，例如:

Then body in the another div like:

<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>

现在，您可以为主体div指定固定高度，并将oveflow设置为auto.像:

Now you can give a fixed height to body div and set oveflow to auto. like:

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

这篇关于是否有CSS3方式修复&lt; thead&gt;在y轴上，让它在x轴上滚动?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！