I'm using transform: translateY on tbody and thead to position them in a large div.
table thead {
transform: translateY(200px);
background: green;
}
table tbody {
transform: translateY(190px);
background: blue;
}
In webkit (Chrome and Safari) the tbody overlays the thead - even when I add z-index to both selectors. Here an example. The thead should always be visible at all times, and the tbody should have a lower z-index being in the background.
Why is that is there a way around it?
See Question&Answers more detail:os