Question

我有一个在Chrome中看起来很棒的html表格（多行和冻结版THEAD），但是当我在Firefox中打开时，THEAD和TBODY之间的对齐变得一团糟。我已经在JSFiddle中创建了HTML：

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

这是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;
}

您可以在Chrome和Firefox中进行测试。

有没有人可以告诉我如何在Chrome和Firefox中整理这个HTML？

HTML表多行和冻结窗格THEAD - Firefox中的对齐问题

0 个答案: