仅冻结 html 表格的第一行（固定表格标题滚动）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8423768/
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
Freeze the top row for an html table only (Fixed Table Header Scrolling)
提问by Davis Dimitriov
I want to make an html table with the top row frozen (so when you scroll down vertically you can always see it).
我想制作一个顶行冻结的 html 表格（所以当你垂直向下滚动时，你总是可以看到它）。
Is there a clever way to make this happen without javascript?
有没有一种聪明的方法可以在没有 javascript 的情况下实现这一点？
Note that I do NOT need the left column frozen.
请注意，我不需要冻结左列。
采纳答案by Feisty Mango
This is called Fixed Header Scrolling. There are a number of documented approaches:
这称为固定标题滚动。有许多记录在案的方法：
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://www.imaputz.com/cssStuff/bigFourVersion.html
You won't effectively pull this off without JavaScript ... especially if you want cross browser support.
如果没有 JavaScript，您将无法有效地实现这一点……尤其是如果您想要跨浏览器支持。
There are a number of gotchyas with any approach you take, especially concerning cross browser/version support.
您采用的任何方法都有很多问题，尤其是在跨浏览器/版本支持方面。
Edit:
编辑：
Even if it's not the header you want to fix, but the first row of data, the concept is still the same. I wasn't 100% which you were referring to.
即使不是你要修复的标题，而是第一行数据，概念还是一样的。我不是你所指的 100%。
Additional thoughtI was tasked by my company to research a solution for this that could function in IE7+, Firefox, and Chrome.
附加以为我是由我公司负责研究这个，可以在IE7 +，火狐和Chrome功能的解决方案。
After many moons of searching, trying, and frustration it really boiled down to a fundamental problem. For the most part, in order to gain the fixed header, you need to implement fixed height/width columns because most solutions involve using two separate tables, one for the header which will float and stay in place over the second table that contains the data.
经过数月的搜索、尝试和挫折，它确实归结为一个根本问题。在大多数情况下，为了获得固定的标题，您需要实现固定高度/宽度的列，因为大多数解决方案涉及使用两个单独的表格，一个用于标题，它将浮动并停留在包含数据的第二个表格上.
//float this one right over second table
<table>
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</table>
<table>
//Data
</table>
An alternative approach some try is utilize the tbody and thead tags but that is flawed too because IE will not allow you put a scrollbar on the tbody which means you can't limit its height (so stupid IMO).
一些尝试的替代方法是利用 tbody 和 thead 标签，但这也有缺陷，因为 IE 不允许您在 tbody 上放置滚动条，这意味着您无法限制其高度（IMO 太愚蠢了）。
<table>
<thead style="do some stuff to fix its position">
<tr>
<th>Header 1</th>
<th>Header 2</th>
</tr>
</thead>
<tbody style="No scrolling allowed here!">
Data here
</tbody>
</table>
This approach has many issues such as ensures EXACT pixel widths because tables are so cute in that different browsers will allocate pixels differently based on calculations and you simply CANNOT (AFAIK) guarantee that the distribution will be perfect in all cases. It becomes glaringly obvious if you have borders within your table.
这种方法有很多问题，例如确保精确的像素宽度，因为表格非常可爱，因为不同的浏览器会根据计算以不同的方式分配像素，而您根本无法（AFAIK）保证分布在所有情况下都是完美的。如果您的表格中有边框，这将变得非常明显。
I took a different approach and said screw tables since you can't make this guarantee. I used divs to mimic tables. This also has issues of positioning the rows and columns (mainly because floating has issues, using in-line block won't work for IE7, so it really left me with using absolute positioning to put them in their proper places).
我采取了不同的方法并说螺丝台，因为你不能做出这个保证。我使用 div 来模拟表格。这也有定位行和列的问题（主要是因为浮动有问题，使用内联块对 IE7 不起作用，所以它真的让我使用绝对定位将它们放在适当的位置）。
There is someone out there that made the Slick Grid which has a very similar approach to mine and you can use and a good (albeit complex) example for achieving this.
那里有人制作了 Slick Grid，它与我的方法非常相似，您可以使用一个很好的（尽管很复杂）示例来实现这一点。
回答by Jaskey
According to Pure CSS Scrollable Table with Fixed Header, I wrote a DEMOto easily fix the header by setting overflow:autoto the tbody.
根据Pure CSS Scrollable Table with Fixed Header，我写了一个DEMO通过设置overflow:auto到 tbody来轻松修复标题。
table thead tr{
display:block;
}
table th,table td{
width:100px;//fixed width
}
table tbody{
display:block;
height:200px;
overflow:auto;//set tbody to auto
}
回答by Tom
My concern was not to have the cells with fixed width. Which seemed to be not working in any case. I found this solution which seems to be what I need. I am posting it here for others who are searching of a way. Check out this fiddle
我担心的是没有固定宽度的单元格。这似乎在任何情况下都不起作用。我找到了这个似乎是我需要的解决方案。我将它张贴在这里供其他正在寻找方法的人使用。看看这个小提琴
Working Snippet:
工作片段：
html, body{
margin:0;
padding:0;
height:100%;
}
section {
position: relative;
border: 1px solid #000;
padding-top: 37px;
background: #500;
}
section.positioned {
position: absolute;
top:100px;
left:100px;
width:800px;
box-shadow: 0 0 15px #333;
}
.container {
overflow-y: auto;
height: 160px;
}
table {
border-spacing: 0;
width:100%;
}
td + td {
border-left:1px solid #eee;
}
td, th {
border-bottom:1px solid #eee;
background: #ddd;
color: #000;
padding: 10px 25px;
}
th {
height: 0;
line-height: 0;
padding-top: 0;
padding-bottom: 0;
color: transparent;
border: none;
white-space: nowrap;
}
th div{
position: absolute;
background: transparent;
color: #fff;
padding: 9px 25px;
top: 0;
margin-left: -25px;
line-height: normal;
border-left: 1px solid #800;
}
th:first-child div{
border: none;
}<section class="">
<div class="container">
<table>
<thead>
<tr class="header">
<th>
Table attribute name
<div>Table attribute name</div>
</th>
<th>
Value
<div>Value</div>
</th>
<th>
Description
<div>Description</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>align</td>
<td>left, center, right</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the alignment of a table according to surrounding text</td>
</tr>
<tr>
<td>bgcolor</td>
<td>rgb(x,x,x), #xxxxxx, colorname</td>
<td>Not supported in HTML5. Deprecated in HTML 4.01. Specifies the background color for a table</td>
</tr>
<tr>
<td>border</td>
<td>1,""</td>
<td>Specifies whether the table cells should have borders or not</td>
</tr>
<tr>
<td>cellpadding</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between the cell wall and the cell content</td>
</tr>
<tr>
<td>cellspacing</td>
<td>pixels</td>
<td>Not supported in HTML5. Specifies the space between cells</td>
</tr>
<tr>
<td>frame</td>
<td>void, above, below, hsides, lhs, rhs, vsides, box, border</td>
<td>Not supported in HTML5. Specifies which parts of the outside borders that should be visible</td>
</tr>
<tr>
<td>rules</td>
<td>none, groups, rows, cols, all</td>
<td>Not supported in HTML5. Specifies which parts of the inside borders that should be visible</td>
</tr>
<tr>
<td>summary</td>
<td>text</td>
<td>Not supported in HTML5. Specifies a summary of the content of a table</td>
</tr>
<tr>
<td>width</td>
<td>pixels, %</td>
<td>Not supported in HTML5. Specifies the width of a table</td>
</tr>
</tbody>
</table>
</div>
</section>回答by Joe
I know this has several answers, but none of these really helped me. I found this articlewhich explains why my stickywasn't operating as expected.
我知道这有几个答案，但这些答案都没有真正帮助我。我发现这篇文章解释了为什么我sticky没有按预期运行。
Basically, you cannot use position: sticky;on <thead>or <tr>elements. However, they can be used on <th>.
基本上，您不能使用position: sticky;on<thead>或<tr>元素。但是，它们可以用于<th>.
The minimum code I needed to make it work is as follows:
我需要使其工作的最低代码如下：
table {
text-align: left;
position: relative;
}
th {
background: white;
position: sticky;
top: 0;
}
With the table set to relative the <th>can be set to sticky, with the top at 0
将 table 设置为 relative<th>可以设置为sticky，顶部为0
回答by Chinthaka Fernando
回答by zarko.kuvalja
It is possible using position:fixedon <th>(<th>being the top row).
可以使用position:fixedon <th>（<th>作为顶行）。
回答by Eric Fortis
you can use two divs one for the headings and the other for the table. then use
您可以使用两个 div，一个用于标题，另一个用于表格。然后使用
#headings {
position: fixed;
top: 0px;
width: 960px;
}
as @ptriek said this will only work for fixed width columns.
正如@ptriek 所说，这只适用于固定宽度的列。
回答by LCIII
The Chromatable jquery plugin allows a fixed header (or top row) with widths that allow percentages--granted, only a percentage of 100%.
Chromatable jquery 插件允许固定标题（或顶行）的宽度允许百分比 - 授予，只有 100% 的百分比。
http://www.chromaloop.com/posts/chromatable-jquery-plugin
http://www.chromaloop.com/posts/chromatable-jquery-plugin
I can't think of how you could do this without javascript.
我想不出没有 javascript 你怎么能做到这一点。
update: new link -> http://www.jquery-plugins.info/chromatable-00012248.htm
更新：新链接 -> http://www.jquery-plugins.info/chromatable-00012248.htm
回答by webzy
Using css zebra styling
使用 css 斑马样式
Copy paste this example and see the header fixed.
复制粘贴此示例并查看已修复的标题。
<style>
.zebra tr:nth-child(odd){
background:white;
color:black;
}
.zebra tr:nth-child(even){
background: grey;
color:black;
}
.zebra tr:nth-child(1) {
background:black;
color:yellow;
position: fixed;
margin:-30px 0px 0px 0px;
}
</style>
<DIV id= "stripped_div"
class= "zebra"
style = "
border:solid 1px red;
height:15px;
width:200px;
overflow-x:none;
overflow-y:scroll;
padding:30px 0px 0px 0px;"
>
<table>
<tr >
<td>Name:</td>
<td>Age:</td>
</tr>
<tr >
<td>Peter</td>
<td>10</td>
</tr>
</table>
</DIV>
Notice the top padding of of 30px in the div leaves space that is utilized by the 1st row of stripped data ie tr:nth-child(1) that is "fixed position" and formatted to a margin of -30px
请注意，div 中 30px 的顶部填充留下了第一行剥离数据使用的空间，即 tr:nth-child(1) 是“固定位置”并格式化为 -30px 的边距
回答by Hans Peter M?ller
I use this:
我用这个：
tbody{
overflow-y: auto;
height: 350px;
width: 102%;
}
thead,tbody{
display: block;
}
I define the columns width with bootstrap css col-md-xx. Without defining the columns width the auto-width of the doesn't match the . The 102% percent is because you lose some sapce with the overflow
我使用 bootstrap css col-md-xx 定义列宽。如果没有定义列宽， 的自动宽度与 . 102% 的百分比是因为您因溢出而损失了一些空间
