您能告诉我如何实现表格的标头。它位于div中，并带有溢出：自动并向右滚动。而且我支持IE10 +。
这是我的html
<div class='table-block'>
<div class='table-header'>
<div>
header 1
</div>
<div>
header 1
</div>
<div>
header 1
</div>
<div>
header 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
<div class='table-body'>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
<div>
body 1
</div>
</div>
</div>
这是我的CSS
.table-block{
overflow: auto;
}
.table-header{
display: table;
table-layout: fixed;
width: 100%;
}
.table-header > div{
display: table-cell;
border: 1px solid;
width: 1000px;
}
.table-body{
display: table;
table-layout: fixed;
width: 100%;
}
.table-body > div{
display: table-cell;
border: 1px solid;
width: 1000px;
}
我需要完全相同的标记。
请有人给我一个建议。
这是极少复制的小提琴，请检查https://jsfiddle.net/kzmwtuhb/2/
最佳答案
我已经更新了您的jsfiddle。我不确定我的解决方案是您要寻找的。