我将表格标题固定在页面顶部。 我需要tabled标题水平滚动主体内容。
有没有办法堆叠或组合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>
答案 0 :(得分：0)
您听说过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>