Html 如何使表格行固定在顶部
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8913118/
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
How to make table row fixed at the top
提问by n92
I have a table without thelements, Only tdelements are there. Is there any way to make My first row fixed(label). The table is like this
我有一张没有th元素的表格，只有td元素。有没有办法让我的第一行固定（标签）。桌子是这样的
<table>
<tr>
<td>Name:</td>
<td>Age:</td>
</tr>
<tr>
<td>John</td>
<td>20</td>
</tr>
<tr>
......
</tr>
</table>
I want to make first row with the fields Name and Age as fixed. So that during the scrolling the labels will not disappear.
我想用固定的名称和年龄字段制作第一行。这样在滚动过程中标签不会消失。
回答by RageAgainstTheMachine
I've been searching for an answer for this problem for a while and finally I've found something that works very nice.
我一直在寻找这个问题的答案，最后我找到了一些非常好的东西。
The secret is in this piece of code that makes the scrolling possible in the table
秘诀就在这段代码中，它使表格中的滚动成为可能
thead, tbody, tr, td, th { display: block; }
But you can find a full example here http://jsfiddle.net/T9Bhm/7/.
但是你可以在这里找到一个完整的例子http://jsfiddle.net/T9Bhm/7/。
Hope it helps! :)
希望能帮助到你！:)
回答by Vitalii Maslianok
i wrote plugin which can freeze any row (not only th) at the top of page or container. feel free to use it. http://maslianok.github.io/stickyRows/
我编写了可以冻结页面或容器顶部的任何行（不仅是 th）的插件。随意使用它。 http://maslianok.github.io/stickyRows/
回答by Fabian Leutgeb
Setting position:fixedshould do that for you:
设置position:fixed应该为您做到这一点：
<tr style="position:fixed">
<td>Name:</td>
<td>Age:</td>
</tr>
Edit:
编辑：
<tr style="position:fixed;top:0;background:#FFF;">
<td>Name:</td>
<td>Age:</td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
Example:http://jsfiddle.net/aVQjN/
回答by BrettAdamsGA
On the row that you want to stay fixed, set the style position: fixedand set a background color to that row, or you will end up having two layers of text when you scroll the list.
在要保持固定的行上，设置样式position: fixed并为该行设置背景颜色，否则滚动列表时最终会出现两层文本。
Another issue to pay attention to is the fact that the first row will be hidden under the fixed row, due to how the fixed position style works. to fix this put in a blank row.
另一个需要注意的问题是，由于固定位置样式的工作方式，第一行将隐藏在固定行下方。解决这个问题放在一个空白行。
<table width="400" border="1">
<tr style="position: fixed; background-color: grey;">
<td width="200">
Name
</td>
<td width="200">
Age
</td>
</tr>
<tr>
<td width="200">
</td>
<td width="200">
</td>
</tr>
<tr>
<td>
John
</td>
<td>
28
</td>
</tr>
<tr>
<td>
Jacob
</td>
<td>
22
</td>
</tr>
<tr>
<td>
Nicole
</td>
<td>
12
</td>
</tr>
</table>
See link for my full code. http://jsfiddle.net/brettadamsga/yeAhU/
查看我的完整代码的链接。 http://jsfiddle.net/brettadamsga/yeAhU/
回答by Dipak
Use of data table we can fixed the header and footer also. Find the below Code......
使用数据表我们也可以固定页眉和页脚。找到下面的代码......
tbl_Purcordr=$("#tbl_Purcordr").DataTable({
'paging': true,
'pageLength': 25,
'bLengthChange': false,
'sorting': false,
'filter': true,
'info': false,
'scrollY': 360,
'background': 'none',
'fixedHeader': {
'header': true,
'footer': true
}
});
