Can you please tell me how can i achieve sticky header for table. It lay in div with overflow: auto and scrolls right. And I supporting IE10+.
here is my 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>
here is my 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;
}
I need exactly the same markup.
Please someone give me an advice.
Here is fiddle with minimal reproduction please check it https://jsfiddle.net/kzmwtuhb/2/
Aucun commentaire:
Enregistrer un commentaire