我将表格标题固定在页面顶部。 我需要表格标题与正文内容一起水平滚动。
有没有办法通过堆叠或组合 CSS 行来实现此目的？ 有没有办法在使用position:fixed后保留元素上继承的css？
请检查示例代码。
table#live {
max-width: 995px;
min-width: 995px;
}
table {
width: 100%;
margin: 10px 0 25px;
}
.custom {
overflow-x: scroll;
width: 100%;
"
}
thead.fixedheader {
position: fixed;
top: 0;
background-color: grey;
}<div class="custom">
<table id="live">
<thead class="fixedheader">
<tr>
<th>hddddddddddddddddddddd1</th>
<th>hddddddddddddddddddddd2</th>
<th>hddddddddddddddddddddd3</th>
<th>hddddddddddddddddddddd4</th>
<th>hddddddddddddddddddddd5</th>
<th>hddddddddddddddddddddd6</th>
<th>hddddddddddddddddddddd7</th>
</tr>
</thead>
<tbody>
<td class="tname">
body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
</td>
<td>
body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body3
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body4
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body5
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body6
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body7
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
</tbody>
</table>
</div>最佳答案
你听说过position:sticky吗？ https://css-tricks.com/position-sticky-2/您可以使用此技术将标题垂直固定到位，但仍然水平滚动。
示例如下。这样做的缺点是，并非所有浏览器都完全支持它，因此如果您需要 IE 支持 http://caniuse.com/#feat=css-sticky或更旧的 chrome/safari，您需要为这些浏览器提供某种解决方法(我怀疑使用 JavaScript，除非某些 CSS 忍者有更好的主意!)。
table#live {
max-width: 995px;
min-width: 995px;
}
table {
width: 100%;
margin: 10px 0 25px;
}
.custom {
width:100%;"
}
thead.fixedheader th {
position: sticky;
position: -webkit-sticky;
position: -moz-sticky;
top: 0;
background-color: grey;
}<html>
<div class="custom">
<table id="live">
<thead class="fixedheader">
<tr>
<th>hddddddddddddddddddddd1</th>
<th>hddddddddddddddddddddd2</th>
<th>hddddddddddddddddddddd3</th>
<th>hddddddddddddddddddddd4</th>
<th>hddddddddddddddddddddd5</th>
<th>hddddddddddddddddddddd6</th>
<th>hddddddddddddddddddddd7</th>
</tr>
</thead>
<tbody>
<td class="tname">
body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
</td>
<td>
body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body3
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body4
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body5
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body6
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
<td>
body7
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body1
<br>body1
<br>body1
<br>body1
<br>body1
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
<br>body2
</td>
</tbody>
</table>
</div>
</html>关于javascript - 创建一个随着正文溢出而滚动的粘性表头，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46554082/