Html 在头上放置粘性
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12266262/
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
Position sticky on thead
提问by Willem de Wit
As you might know, position: sticky;has landed in Webkit (demo).
So far I can see this only works within the parent element. But I'd like to know if I can use this in a scrolling div with a table.
您可能知道，position: sticky;已经登陆 Webkit（演示）。到目前为止，我可以看到这仅适用于父元素。但我想知道我是否可以在带有表格的滚动 div 中使用它。
So it needs to 'listen' on the scrolling event of the div, not the table.
所以它需要“监听” 的滚动事件，而div不是table.
I know I can do this with javascript and absolute positioning, but I was wondering if the sticky-positioningwould support this.
我知道我可以用 javascript 和绝对定位来做到这一点，但我想知道是否sticky-positioning会支持这一点。
回答by Evolve
Position sticky on thead thworks in 2018!
位置粘在THEAD日在2018年的作品！
In your stylesheets just add this one line:
在您的样式表中添加这一行：
thead th { position: sticky; top: 0; }
Your table will need to include theadand thfor this to style.
您的表格需要包含thead和th以进行样式设置。
<table>
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
// your body code
</tbody>
</table>
Also, if you have multiple rows in thead, you can select the first one to remain sticky:
此外，如果您在thead 中有多行，您可以选择第一行以保持粘性：
thead tr:first-child th { position: sticky; top: 0; }
As of March 2018 support is pretty much there across modern browsers ref: https://caniuse.com/#feat=css-sticky
截至 2018 年 3 月，现代浏览器的支持几乎已经存在参考：https: //caniuse.com/#feat=css-sticky
Credit goes to @ctf0 for this one (ref comment made 3 Dec 2017)
这个归功于@ctf0（参考评论于 2017 年 12 月 3 日发表）
回答by bioform
If you need sticky header for chrome only then you can set position: sticky; top: some_value(topproperty is mandatory) for tdelement in a theadelement.
如果您只需要 chrome 的粘性标题，那么您可以为元素中的元素设置position: sticky; top: some_value（top属性是必需的）。tdthead
See:
看：
<table border=1>
<thead>
<tr>
<td style='position: sticky; top: -1px;background: red'>Sticky Column</td>
<td>Simple column</td>
</tr>
</thead>
回答by czerny
position: stickydoesn't workwith table elements (as long as their displayattribute starts with table-) since tables are not part of specification:
position: sticky不适用于表格元素（只要它们的display属性以 开头table-），因为表格不是规范的一部分：
Other kinds of layout, such as tables, "floating" boxes, ruby annotations, grid layouts, columns and basic handling of normal "flow" content, are described in other modules.
其他类型的布局，例如表格、“浮动”框、ruby 注释、网格布局、列和正常“流”内容的基本处理，在其他模块中进行了描述。
Edit: As Jul 2019 according to https://caniuse.com/#feat=css-stickyFirefox supports this feature and Chrome has at least support for <th>tag.
编辑：截至 2019 年 7 月，根据https://caniuse.com/#feat=css-stickyFirefox 支持此功能，Chrome 至少支持<th>标签。
回答by Willem de Wit
As it turns out it position: stickyonly works in the window and not in a scrolling div.
事实证明，position: sticky它只适用于窗口，而不适用于滚动 div。
I created a test-casewith a very long table with a table header:
我创建了一个带有表头的很长表的测试用例：
h1 {
font-size: 18px;
font-weight: bold;
margin: 10px 0;
}
div.testTable {
height: 200px;
overflow: auto;
}
table.stickyHead thead {
position: -webkit-sticky;
top: 0px;
background: grey;
}
table.stickyHead td,
table.stickyHead th {
padding: 2px 3px;
}<h1>Position sticky</h1>
<div class="testTable">
<table class="stickyHead">
<thead>
<tr>
<th>column 1</th>
<th>column 2</th>
<th>column 3</th>
<th>column 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
</tr>
</tbody>
</table>
</div>As you can see, if you remove the overflow from the wrapper and make your window not so tall, the table-head is sticking to the top of the window. I doesn't apply to the wrapping diveven if you make give the divposition: relative
如您所见，如果您从包装纸上取下溢出物并使窗户不那么高，则表头会粘在窗户的顶部。我不适用于包装，div即使你给divposition: relative
回答by lucasvm1980
Caution:
警告：
posotion:sticiky doesnt work anymore on Google Chrome in 2019, try to use fixed instead or display:inline-block
posotion:sticky 在 2019 年不再在 Google Chrome 上工作，尝试使用 fixed 或 display:inline-block
