jQuery 修复了 <table> 中的 <thead>
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/1965976/
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 <thead> in <table>
提问by eozzy
<table border="1" style="height:50px; overflow:auto;">
<thead>
<tr>
<th>Col 1
</th>
<th>Col 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
<tr>
<td>Cell 5
</td>
<td>Cell 6
</td>
</tr>
</tbody>
</table>
I'd like the above table to be of 50px height so the scrollers would kick in when the content grows, but I'd also like table headers (thead) to be fixed always on top, while other content can be scrollable. Is there an solution, preferable using jQuery?
我希望上面的表格的高度为 50 像素，这样滚动条就会在内容增长时启动，但我也希望表格标题 (thead) 始终固定在顶部，而其他内容可以滚动。有没有解决方案，最好使用jQuery？
Thanks in advance for your help.
在此先感谢您的帮助。
采纳答案by Mark Pope
Try this post: jQuery Scrollable, Sortable, Filterable table
试试这篇文章：jQuery Scrollable, Sortable, Filterable table
It looks like they've got what you need (which is a freezable, scrollable jquery table).
看起来他们已经得到了你需要的东西（这是一个可冻结、可滚动的 jquery 表）。
回答by R. S.
Found myself in need of similar functionality. Couldn't find anything light and simple, so I created the plugin myself: TH Float jQuery Plugin
发现自己需要类似的功能。找不到任何轻松简单的东西，所以我自己创建了插件：TH Float jQuery Plugin
I hope someone finds it useful.
我希望有人觉得它有用。
回答by panteo
Here it is my trick. You have to change something in your html too.
这是我的诀窍。您也必须更改 html 中的某些内容。
The trick consists in inserting through js after the real scrolling thead, a secondary and identical thead positioned fixed. Cells widths are adjusted through js too.
诀窍在于在真正的滚动主题之后通过 js 插入，定位固定的辅助和相同的主题。单元格宽度也通过 js 调整。
Adjust the code on your needs.
根据您的需要调整代码。
CSS
CSS
thead.fixed {
position: fixed;
}
HTML
HTML
<div style="overflow: auto;">
<table id="my_table">
<thead>
<tr>
<th>Head 1</th>
<th>Head 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Body 1</td>
<td>Body 2</td>
</tr>
</tbody>
</table>
</div>
jQuery
jQuery
$( function() {
fixListThead();
});
$(window).resize( function() {
fixListThead();
});
var fixListThead = function() {
$('#my_table thead.fixed').remove(); // Removes (if present) fixed thead when resizing
var widths = [];
$('#my_table thead th').each( function(i, element) {
widths[i] = $(element).width();
});
$('<thead class="fixed">' + $('#my_table thead').html() + '</thead>').insertAfter($('#my_table thead'));
$('#my_table thead.fixed th').each( function(i, element) {
$(element).css('width', widths[i] + 'px');
});
}
回答by Tebo
<table style="width: 300px" cellpadding="0" cellspacing="0">
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</table>
<div style="overflow: auto;height: 50px; width: 320px;">
<table style="width: 300px;" cellpadding="0" cellspacing="0">
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
<tr>
<td>Value 1</td>
<td>Value 2</td>
</tr>
</table>
</div>
Update:
更新：
Check this out:
看一下这个：
回答by user3326050
Using CSS transform may be more simple:
使用 CSS 变换可能更简单：
-webkit-transform','translateY(0px)'
回答by digitalway
these days browser begin to well suport the css directive position:sticky, who is the css answer to this problem, it mus be applyed to each and you don't need to specify a height for the table for it to work.
这些天浏览器开始很好地支持 css 指令 position:sticky，谁是这个问题的 css 答案，它必须应用于每个，并且您不需要为表格指定高度以使其工作。
<style>
table th{
position: sticky;
top: 0px; /* pixel gap between the top and the head when it stop scrolling
}
</style>
<table border="1">
<thead>
<tr>
<th>Col 1
</th>
<th>Col 2
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell 3
</td>
<td>Cell 4
</td>
</tr>
<tr>
<td>Cell 5
</td>
<td>Cell 6
</td>
</tr>
</tbody>
</table>
