Html表多行和冻结窗格THEAD - firefox中的对齐问题 [英] Html table multiple row and freeze pane THEAD - alignment issue in firefox

问题描述

我有一个在Chrome浏览器中看起来很棒的html表格（多行和Freeze Pane THEAD），但是当我在Firefox中打开时，THEAD和TBODY之间的对齐变得一团糟



这是CSS：



表

{

border-collapse：collapse;

最小宽度：1000px;

最大宽度：1000px;

}

thead

{

显示：阻止;

溢出：自动;

颜色：#fff;

背景：＃ 000;

}

tbody

{

display：block;

height ：500px;

背景：白色;

溢出：自动;

}

th，td

{

填充：.5em 1em;

text-align：left;

display：inline-block;

vertical-align：top;

border-left：1px solid #fff;

}

th：nth-孩子（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; < br $>
}

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中测试。



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



最好的问候



我的尝试：



我已经在JSFiddle中创建了HTML：



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

解决方案

请使用此css代码

th，td

{float：左;}

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/

解决方案

Please use this css code for
th, td
{float:left;}

这篇关于Html表多行和冻结窗格THEAD - firefox中的对齐问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！