Html таблица несколько строк и замораживание панели проблема выравнивания в firefox

---

У меня есть html-таблица (Multiple Row and Freeze Pane THEAD), которая отлично смотрится в Chrome, но когда я открываю ее в Firefox, выравнивание между THEAD и TBODY становится беспорядочным

Это и есть CSS :

стол
{
границы-крах: крах;
минимальная ширина: 1000px;
максимальная ширина: 1000px;
}
элементы thead
{
дисплей: блок;
переполнение: авто;
цвет: #fff;
Предыстория: #000;
}
tbody
{
дисплей: блок;
высота: 500px;
фон: белый;
переполнение: авто;
}
th, td
{
прокладка: .5em 1em;
выравнивание текста: слева;
дисплей: встроенный блок;
вертикальное выравнивание: сверху;
граница слева: 1px solid #fff;
}
th:nth-child(1), td:nth-child(1){
ширина: 20px;
}
th:nth-child(2), td:nth-child(2){
ширина: 90px;
}
th:nth-child(3), td:nth-child(3){
ширина: 40px;
}
th:nth-child(4), td:nth-child(4){
ширина: 160px;
}
th:nth-child(5), td:nth-child(5){
ширина: 85px;
}
th:nth-child(6), td:nth-child(6){
ширина: 160px;
}
th:nth-child(7), td:nth-child(7){
ширина: 70px;
}
th:nth-child(8), td:nth-child(8){
ширина: 92px;
}

Вы можете протестировать его в Chrome и Firefox.

Есть ли кто-нибудь, кто может сказать мне, как привести в порядок этот HTML-код в Chrome и Firefox?

с уважением

Что я уже пробовал:

Я уже создал HTML в JSFiddle :

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

---