最初滚动,然后用滚动页面主体固定表头.
我想在我的网页中间的某个地方放一个表,它有以下行为：
>在大多数情况下,像“正常”的html表一样……直到你滚过表格的标题
>当您滚动表格的标题时,表格标题会固定在该页面的顶部或附近,而表格的其余部分会继续滚动页面正文的其余部分.这与滚动< tbody>不同.固定< thead>.
>如果滚动超过表格的最后一行,表格标题会消失,即可获得奖励积分.
>如果表格行在比标题滚动更高时消失,则会获得奖励积分. (当我尝试将固定表头放在与页面顶部不同的位置时,我只需要此功能)
它应该看起来类似于这个小提琴中给出的例子：
http://jsfiddle.net/yeAhU/260/
除了标题内容之外,在修改之前将滚动到页面顶部,并且在滚动时表格内容不应显示在标题上方.
我尝试在线调整大多数已发布的“固定表标题滚动正文”问题的答案,但我无法从这些示例中获得我正在寻找的行为类型.
如果可能的话,我希望解决方案是基于CSS的,但我对JS等其他解决方案持开放态度.
我希望该解决方案兼容Chrome和& Firefox浏览器.
题
是否可以这样做,是否可以只用CSS做到这一点？
怎么样？
解决方法
在CSS中你可以使用position：sticky;但由于Firefox不能很好地混合这两者,你仍然需要使用thead和tbody来破坏表格布局以使用粘性. …重置tbody上的table-layout并将table-layout设置为fixed以帮助从thead / tbody中可视地保持列…示例：
http://jsfiddle.net/yeAhU/261/我相信它符合要点：1,2,3(实际上是4个？)
07001
07002 next link might be helpfull
07003
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>
