此答案将用作不完全支持的占位符，position: sticky并将随着时间的推移而更新。目前建议不要在生产环境中使用本机实现。
查看当前支持：https ://caniuse.com/#feat=css-sticky
用于position: sticky
另一种答案是使用position: sticky. 如 W3C 所述：
粘性定位框的定位类似于相对定位的框，但偏移量是参考最近的带有滚动框的祖先计算的，或者如果没有祖先有滚动框，则参考视口。
这准确描述了相对静态标头的行为。<thead>将它分配给第一个或第一个HTML 标记很容易，因为根据 W3C<tr>应该支持它。但是，Chrome、IE 和 Edge都存在为这些标签分配粘性位置属性的问题。目前似乎也没有优先解决这个问题。
似乎对表格元素有效的是将粘性属性分配给表格单元格。在这种情况下，<th>细胞。
因为一个表不是一个尊重你分配给它的静态大小的块元素，所以最好使用一个包装器元素来定义滚动溢出。
编码
div {
display: inline-block;
height: 150px;
overflow: auto
}
table th {
position: -webkit-sticky;
position: sticky;
top: 0;
}
/* == Just general styling, not relevant :) == */
table {
border-collapse: collapse;
}
th {
background-color: #1976D2;
color: #fff;
}
th,
td {
padding: 1em .5em;
}
table tr {
color: #212121;
}
table tr:nth-child(odd) {
background-color: #BBDEFB;
}
<div>
<table border="0">
<thead>
<tr>
<th>head1</th>
<th>head2</th>
<th>head3</th>
<th>head4</th>
</tr>
</thead>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
<td>row 1, cell 2</td>
<td>row 1, cell 2</td>
</tr>
</table>
</div>
在此示例中，我使用一个简单的<div>包装器来定义使用静态高度150px. 这当然可以是任何大小。现在已经定义了滚动框，粘性<th>元素将对应“到最近的带有滚动框的祖先”，即 div-wrapper。
使用position: sticky polyfill
不受支持的设备可以使用 polyfill，它通过代码实现行为。一个例子是stickybits，它与浏览器实现的行为相似position: sticky。
polyfill 示例：http: //jsfiddle.net/7UZA4/6957/