如何冻结 HTML 表格中的标题行？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6502062/
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 freeze header row in HTML table?
提问by laxmi
I am using an HTML table and have applied vertical scroll to it and now I want to freeze the header row during scrolling. How can I do this?
我正在使用 HTML 表格并对其应用了垂直滚动，现在我想在滚动过程中冻结标题行。我怎样才能做到这一点？
回答by David Andersson
HTML:
HTML：
<table>
<tr id="header-row">
<th>header col 1</th>
<th>header col 2</th>
</tr>
<tr>
<td>data</td>
<td>data</td>
<tr>
<tr>...</tr>
...
</table>
CSS:
CSS：
#header-row { position:fixed; top:0; left:0; }
table {padding-top:15px; }
回答by gmhk
One easy way is to create 2 tables and fix the column widths. The first one act as Header
一种简单的方法是创建 2 个表并固定列宽。第一个充当标题
The lower second table is where the scroll bar is present and only the data.
下方的第二个表是滚动条所在的位置，只有数据。
回答by bob.mazzo
for some future seek of a solution to creating a table with a locked column header:
为了将来寻求创建带有锁定列标题的表的解决方案：
Here's the css for the main PortfolioList div, then the header portion:
这是主PortfolioList div的 css ，然后是标题部分：
<style type="text/css">
div.PortfolioList
{ /* bkgrnd color is set in Site.css, overflow makes it scrollable */
height:500px; width:680px; position: static; overflow-y:auto; float:left;
}
div.PortfolioList_hdr
{ /* this div used as a fixed column header above the porfolio table, so we set bkgrnd color here */
background-color:#7ac0da; height:45px; width:680px; position: static; float:left;
}
</style>
Now here are the tables within the two divs mentioned above:
现在这里是上面提到的两个 div 中的表格：
<div class="PortfolioList_hdr">
<table id="pftable_hdr">
<caption>Portfolio Definitions</caption>
<thead>
<tr>
<th>Pf Id</th><th>Name</th><th>Exp Type</th><th>Date</th><th>Term</th><th>Exposure</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<div class="PortfolioList">
<table id="pftable">
<tbody>
</tbody>
</table>
</div>
I used jQuery to add the and and populate the contents accordingly.
我使用 jQuery 添加和并相应地填充内容。
I hope this helps...
我希望这有帮助...
- Bob
- 鲍勃
回答by user3215480
Check out this jQuery plugin. It lets you freeze the column and fix the header, like you wanted.
看看这个 jQuery 插件。它可以让您冻结列并修复标题，就像您想要的那样。
回答by kheya
This seems working in FF.
这似乎适用于 FF。
<table >
<thead><tr><th>This is my header</th></tr></thead>
<tbody style="max-height:100px; overflow-y:auto; display:block">
<tr>
<td>col1</td>
</tr>
<tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr><tr>
<td>col1</td>
</tr>
</tbody>
</table>
