[英]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.
这已被问过无数次: 在这里 ,
在那里 ,而
另一个地方只是在SO上。 Yet there's no real good answer that I can find.
然而,我找不到真正的好答案。
<recap> Often I have tables that are vertically much deeper than the viewport. <recap>通常我的表垂直比视口深得多。 I'd like to be able to scroll the table's
<tbody>
while its <thead>
remains fixed and visible. 我希望能够滚动表格的
<tbody>
而其<thead>
保持固定且可见。 Some of these tables are also much wider than the viewport. 其中一些表格也比视口宽得多。 Here I want the table's
<thead>
to scroll horizontally. 在这里,我希望表的
<thead>
水平滚动。
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>
1 . 为了获得效果,我有几十行JS,包括
setInterval( )
调用来检查scrollLeft
和scrollTop
,这样我就可以重新定位<thead>
1的副本 。 It works but it's a huge, ungainly, frail and unmaintainable pain in the ass.</recap> 它有效,但它在屁股上是一个巨大的,笨拙的,虚弱的,不可维护的痛苦。</ recap>
Question: Is there some straightforward css3 way, existent or emerging or proposed, that I can use to get aa table's <thead>
and <tbody>
to scroll horizontally and vertically, yet independently of each other? 问题:是否有一些简单的css3方式,存在的或新兴的或提议的,我可以使用一个表的
<thead>
和<tbody>
水平和垂直滚动,但彼此独立? Thanks! 谢谢!
1 Why setInterval( )
? 1为什么
setInterval( )
? Because IE doesn't uniformly deliver onScroll
events, you silly; 因为IE不能统一传递
onScroll
事件,所以你很傻; everybody knows that! 大家都知道!
I ended up modeling the "solution" on the suggestion of @Naveed Ahmad. 我最终根据@Naveed Ahmad的建议对“解决方案”进行了建模。 I put the data part of the table in a <tbody>;
我把表的数据部分放在<tbody>中; and made a fake <thead> that I filled in at onLoad time by referring to the widths and offsets of the <td>s in the first table row, like this:
并通过引用第一个表行中<td>的宽度和偏移量,在onLoad时填写了一个虚假的<thead>,如下所示:
function position_col_heads ( ) {
// get all the TD child elements from the first row
var tds = main_tbody.children[0].getElementsByTagName('TD');
for ( var i = 0; i < tds.length; ++i ) {
thead.children[i].style.left =
parseFloat( tds[i].offsetLeft ) + 'px';
thead.children[i].style.width =
parseFloat( tds[i].scrollWidth ) + 'px';
}
}
This works more or less OK on this page .
这在此页面上或多或少都可以。
a dirty way would be to put the header table in a separate div like: 一种肮脏的方式是将标题表放在一个单独的div中,如:
<div class="header">
<table>
<thead><tr><td>#</td><td>v</td></tr></thead>
</table>
</div>
Then body in the another div like: 然后身体在另一个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>
Now you can give a fixed height to body div
and set oveflow
to auto
. 现在,您可以为body
div
提供固定高度,并将oveflow
设置为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;}
here is a working example I did in jsfiddle 这是我在jsfiddle中做的一个工作示例
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.