[英]HTML table with fixed headers only in Y (Scrollable in X)
I'm trying to do a table with a fixed header ONLY on the Y axis ( Just like in Excel ). 我正在尝试只在Y轴上做一个带有固定标题的表( 就像在Excel中一样 )。 The problem is that it needs to be scrollable on the X axis.
问题在于它需要在X轴上滚动。 I found another answer here but it doesn't work for me.
我在这里找到了另一个答案,但这对我不起作用。 Here are my tests JSBIN
这是我的测试JSBIN
I tried with 我尝试过
style="width: 400px; height: 200px; overflow: scroll;"
to make a test case. 做一个测试用例。 And with
与
position: absolute;
and 和
position: static;
To make the header static. 使标头为静态。 Also tried with the answer of the other question with no positive results for me.
还尝试了其他问题的答案,但对我没有积极的结果。
This is not a duplicate of the other question because the problems are slightly different. 这不是其他问题的重复,因为问题略有不同。
I can use CSS , Javascript or whatever to solve this. 我可以使用CSS , Javascript或其他方法解决此问题。
Set the thead
s position to absolute, and fix the tr
inside it: https://jsfiddle.net/yak613/x5stpv9y/ 将
thead
的位置设置为绝对,并固定其中的tr
: https : //jsfiddle.net/yak613/x5stpv9y/
table {
position: relative;
padding-top: 20px;
}
table thead {
position: absolute;
left: 0;
right: 0;
top: 0;
background: #fff;
}
table thead tr {
position: fixed;
background: #fff;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.