javascript 具有可变宽度的固定标题/可滚动表格
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3516486/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Fixed Header/Scrollable Table with Variable Width
提问by JayD3e
I realize this question has been asked quite a bit on Stack Overflow; however, after looking through a number of them, I believe my question has one more requirement. I want to transform a regular html table, into a table that can be scrolled both vertically and horizontally, while the the header remains at the top. The width of this table exceeds the width of the page, so I need the headers to move horizontally as the table is scrolled. I would prefer to use a pure CSS method; however, I will use Javascript if necessary. Have yet to find a solution that does all of this.
我意识到这个问题已经在 Stack Overflow 上被问到了很多；然而，在浏览了其中的一些之后，我相信我的问题还有一个要求。我想将一个普通的 html 表格转换成一个可以垂直和水平滚动的表格，而标题保持在顶部。这个表格的宽度超过了页面的宽度，所以我需要标题在表格滚动时水平移动。我更喜欢使用纯 CSS 方法；但是，如有必要，我将使用 Javascript。还没有找到可以完成所有这些的解决方案。
回答by Miriam Salzer
This solution might work for you depending on the style of your headers. It's pure CSS. http://salzerdesign.com/blog/?p=191
根据标题的样式，此解决方案可能对您有用。它是纯 CSS。 http://salzerdesign.com/blog/?p=191
回答by Epik
Why would you not just use a and set a height and width for it allowing overflow. Then just simply place your table in there and you are good to go.
为什么不直接使用 a 并为其设置高度和宽度以允许溢出。然后只需将您的桌子放在那里，您就可以开始了。
To me that just seems like the most logic and easiest way to go about it...
对我来说，这似乎是最合乎逻辑和最简单的方法……
回答by LemonCool
well you can use JQuery to do this in few lines of code, you can see my other post to create a table with fix header and scrollable body
好吧，您可以使用 JQuery 在几行代码中完成此操作，您可以查看我的另一篇文章来创建带有修复标题和可滚动正文的表
Create Table with scrollable body
after that lets imagine you have one div for the headers with class name = "Top1" and one div for the body with class name = "Top2", you can bind the scroll of one to the other
之后让我们想象你有一个类名=“Top1”的标题的div和一个类名=“Top2”的主体的div，你可以将一个滚动绑定到另一个
$('.Top2').bind('scroll', function(){
$(".Top1").scrollLeft($(this).scrollLeft());
});
$('.Top1').bind('scroll', function(){
$(".Top2").scrollLeft($(this).scrollLeft());
});
回答by bln
Here is a good jQuery plugin, working in all browsers! (check out the demo)
这是一个很好的 jQuery 插件，适用于所有浏览器！（查看演示）
The result is a table with a fixed header, scrolling (for the moment..) only vertically, but with a variable width.
结果是一个带有固定标题的表格，仅垂直滚动（目前..），但宽度可变。
I develop this plugin to meet the problem of fixed header + flexible width.
我开发这个插件是为了解决固定页眉+灵活宽度的问题。
Check it: https://github.com/benjaminleouzon/tablefixedheader
