Подскажите, пожалуйста, как мне получить липкий заголовок для таблицы.Он лежит в div с переполнением: auto и прокручивает вправо.И я поддерживаю 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/