I have an application on which I need sticky headers. It works normally with Chrome and other browsers, but Safari doesn't, although documentation says that it should.
This is the code: (you should run it with Safari to not work)
.container{
padding: 0rem 1rem 0rem 1rem;
overflow: scroll;
table-layout: fixed;
height:10rem;
width: 100%;
background-color:green;
}
.my_table {
border-collapse: separate;
border-spacing: 0;
text-align: center;
width: 100%;
margin-bottom: 1rem;
color: #212529;
}
.my_table thead,
.my_table thead th,
.my_table thead td {
border-top: 0px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 4;
background-color: #fff;
color: #0062cc;
}
<div class='container'>
<table class='my_table table'>
<thead><tr><th><div>Header</div></th></tr></thead>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
</table>
</div>
How do I fix this?
I read about the problem if the parent overflow
is auto
, but mine is scroll
.
Set sticky only for .my_table thead th
to work for safari and chrome
.container{
padding: 0rem 1rem 0rem 1rem;
overflow: scroll;
table-layout: fixed;
height:10rem;
width: 100%;
background-color:green;
}
.my_table {
border-collapse: separate;
border-spacing: 0;
text-align: center;
width: 100%;
margin-bottom: 1rem;
color: #212529;
}
.my_table thead th {
border-top: 0px;
position: -webkit-sticky;
position: sticky;
top: 0;
z-index: 4;
background-color: #fff;
color: #0062cc;
}
<div class='container'>
<table class='my_table table'>
<thead><tr><th><div>Header</div></th></tr></thead>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
<tbody><tr><td>Row</td></tr></tbody>
</table>
</div>