Html 带有滚动页面正文的固定表头
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/37264905/
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 Table Header with Scrolling Page Body
提问by agent provocateur
Initially scrolling, then fixed table header with scrolling page body.
最初滚动，然后固定表格标题与滚动页面正文。
I would like to put a table somewhere in the middle of my web page that has the following behavior:
我想在我的网页中间的某处放置一个具有以下行为的表格：
- Acts like a "normal" html table for the most part... until you scroll past the table's headers
- When you scroll past the table's headers, the table headers stays fixed at or near the top of that page, while the rest of the table keeps scrolling with the rest of the page body. This is not the same as a scrolling
<tbody>with fixed<thead>. - Bonus points if the table headers disappear if you scroll past the last row of the table.
- Bonus points if the table rows disappear as they scroll higher than the headers. (I only need this feature when/if I were to try to place the fixed table header in a different location than at the very top of the page)
- 在大多数情况下就像一个“普通”的 html 表......直到你滚动过表的标题
- 当您滚动经过表格的标题时，表格标题会固定在该页面的顶部或附近，而表格的其余部分会与页面正文的其余部分一起滚动。这
<tbody>与使用 fixed滚动不同<thead>。 - 如果您滚动到表格的最后一行，表格标题消失，则加分。
- 如果表格行在滚动高于标题时消失，则加分。（当/如果我尝试将固定表格标题放置在与页面最顶部不同的位置时，我只需要此功能）
It should look something similar to the example given in this fiddle:
http://jsfiddle.net/yeAhU/260/
Except header contents would scroll to the top of the page before becoming fixed and the table contents should not show above the headers as it scrolls.
它看起来应该类似于此小提琴中给出的示例：
http: //jsfiddle.net/yeAhU/260/
除了标题内容在固定之前会滚动到页面顶部，并且表格内容不应在标题上方显示为它滚动。
I have tried slightly tweaking most of the posted answers for "fixed table header scrolling body" questions online but I am not able to get the type of behavior I am looking for from those examples.
我已经尝试在网上对“固定表格标题滚动正文”问题的大部分已发布答案进行了微调，但我无法从这些示例中获得我正在寻找的行为类型。
I would like the solution to be CSS-based if possible but I am open to other solutions like JS.
如果可能，我希望该解决方案基于 CSS，但我对其他解决方案（如 JS）持开放态度。
I would like the solution to be compatible with both Chrome & Firefox.
我希望该解决方案与 Chrome 和 Firefox 兼容。
QUESTION
题
Is it possible to do this, and is it possible to do it in just CSS? How?
是否有可能做到这一点，是否有可能只用 CSS 来做到这一点？如何？
回答by G-Cyrillus
In CSS you could use position:sticky;but since Firefox doesn't mix those two so well yet, you still need to use thead and tbody to break the table-layout to use sticky. ... reset the table-layout on tbody and set table-layout to fixed to help hold columns visually together from thead/tbody ... example :
在 CSS 中，您可以使用，position:sticky;但由于 Firefox 还没有将这两者很好地混合，因此您仍然需要使用 thead 和 tbody 来破坏表格布局以使用粘性。...重置 tbody 上的表格布局并将表格布局设置为固定以帮助将列从 thead/tbody 视觉上保持在一起...示例：
http://jsfiddle.net/yeAhU/261/i believe it meets points :1,2,3 (what is 4 actually ? )
http://jsfiddle.net/yeAhU/261/我相信它符合点：1,2,3（实际上 4 是什么？）
http://caniuse.com/#search=sticky
chrome removed it a while agonext link might be helpfull
https://www.sitepoint.com/css-position-sticky-introduction-polyfills/
http://caniuse.com/#search=sticky
chrome 不久前删除了它下一个链接可能会有所帮助
https://www.sitepoint.com/css-position-sticky-introduction-polyfills/
tbody, thead tr {
display: table;
width: 100%;
table-layout: fixed;
}
td {
border:1px solid;
}
* {box-sizing:border-box; border-collapse:collapse;}Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>
<table width="400" border="0" style="display:block;">
<thead style="display:block;position: sticky;top:20px;background-color: grey;">
<tr>
<td width="200">
Name
</td>
<td width="200">
Age
</td>
</tr>
</thead>
<tbody>
<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>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</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>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</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>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</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>
<tr>
<td>
Marie
</td>
<td>
15
</td>
</tr>
<tr>
<td>
Fabian
</td>
<td>
18
</td>
</tr>
<tr>
<td>
Caspar
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Elder
</td>
<td>
12
</td>
</tr>
<tr>
<td>
Frank
</td>
<td>
17
</td>
</tr>
<tr>
<td>
Ling
</td>
<td>
45
</td>
</tr>
<tr>
<td>
Pong
</td>
<td>
68
</td>
</tr>
<tr>
<td>
Jason
</td>
<td>
67
</td>
</tr>
<tr>
<td>
Tony
</td>
<td>
23
</td>
</tr>
<tr>
<td>
Britney
</td>
<td>
21
</td>
</tr>
<tr>
<td>
Cusac
</td>
<td>
91
</td>
</tr></tbody>
</table>
Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>Additional stuff
<br> Additional stuff
<br> Additional stuff
<br> Additional stuff
<br>回答by Tirthraj Rao
Here is your solution.. fiddle by Jonas Schubert Erlandsson
这是你的解决方案.. 乔纳斯舒伯特厄兰森的小提琴
<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>
and the css
和 CSS
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: 200px;
}
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;
}
