Html table multiple row and freeze pane THEAD - alignment issue in firefox

See more:

CSS

HTML

Firefox

table

chrome

I have html table (Multiple Row and Freeze Pane THEAD) that looks great in Chrome, but when I open in Firefox the alignment between THEAD and TBODY becoming a mess

This is the CSS :

table
{
border-collapse: collapse;
min-width: 1000px;
max-width: 1000px;
}
thead
{
display: block;
overflow: auto;
color: #fff;
background: #000;
}
tbody
{
display: block;
height: 500px;
background: white;
overflow: auto;
}
th,td
{
padding: .5em 1em;
text-align: left;
display: inline-block;
vertical-align: top;
border-left: 1px solid #fff;
}
th:nth-child(1), td:nth-child(1){
width: 20px;
}
th:nth-child(2), td:nth-child(2){
width: 90px;
}
th:nth-child(3), td:nth-child(3){
width: 40px;
}
th:nth-child(4), td:nth-child(4){
width: 160px;
}
th:nth-child(5), td:nth-child(5){
width: 85px;
}
th:nth-child(6), td:nth-child(6){
width: 160px;
}
th:nth-child(7), td:nth-child(7){
width: 70px;
}
th:nth-child(8), td:nth-child(8){
width: 92px;
}

You can test in Chrome and Firefox.

Is there anyone can tell me how to tidy up this HTML in Chrome and Firefox?

Best Regards

What I have tried:

I have already created the HTML in JSFiddle :

https://jsfiddle.net/ricxzone05/tu459vub/