表列跨度和行跨度打破在Firefox而不是Chrome浏览器(Table colspan and r

我现在有一个有趣的用户界面错误在Firefox中发生的事情。当页面在Chrome呈现表工作正常。下面是一个自举CDN样本HTML页面，如果你想看到在浏览器中的问题。

在这两种浏览器中运行这个看出区别。

 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> </head> <body> <div style="margin-top: 10px;"> <table class="table table-bordered"> <thead> <tr> <th colspan="1" rowspan="2">ethbp</th> <th colspan="1" rowspan="2">duo-iujo</th> <th colspan="2" rowspan="0">CHUE</th> <th colspan="5" rowspan="0">aeueua aeuaeu</th> <th colspan="4" rowspan="0">aoeua aeuae</th> <th colspan="9" rowspan="0">aeuaeuaeuaeua</th> </tr> <tr> <th colspan="1" rowspan="1">aoeu aeua</th> <th colspan="1" rowspan="1">aeu aeua</th> <th colspan="1" rowspan="1">aeuaeuaeu</th> <th colspan="1" rowspan="1">aeu aeu aeuaeu</th> <th colspan="1" rowspan="1">aeu aeu</th> <th colspan="1" rowspan="1">aeuaeuae</th> <th colspan="1" rowspan="1">near aeu</th> <th colspan="1" rowspan="1">eui</th> <th colspan="1" rowspan="1">uei</th> <th colspan="1" rowspan="1">euer</th> <th colspan="1" rowspan="1">aoeu</th> <th colspan="1" rowspan="1">eua</th> <th colspan="1" rowspan="1">loe</th> <th colspan="1" rowspan="1">oeu</th> <th colspan="1" rowspan="1">uou</th> <th colspan="1" rowspan="1">sec events</th> <th colspan="1" rowspan="1">evn aoeuaeo</th> <th colspan="1" rowspan="1">euoe auae</th> <th colspan="1" rowspan="1">euue oeueuo</th> <th colspan="1" rowspan="1">othre aeuae aeuaeu</th> </tr> </thead> </table> </div> </body> </html>

Answer 1:

Firefox不喜欢你的rowspan=0属性。更改为rowspan=1和它呈现Chrome等。

例如： https://jsfiddle.net/tyybbkah/

Answer 2:

更新您的行跨度=“0”对所有的人都行跨度=“2”。

“使用行跨度=” 0" （仅在Firefox和Opera 12和更早）：”说http://www.w3schools.com/tags/att_td_rowspan.asp

Answer 3:

没有必要写行跨度=“1”或行跨度=“0”和列跨度=“1”或合并单元格=“0”对不必要要求省略所有那些

    <table class="table table-bordered">
        <thead>
        <tr>
            <th colspan="1" rowspan="2">ethbp</th>
            <th colspan="1" rowspan="2">duo-iujo</th>
            <th colspan="2" rowspan="0">CHUE</th>
            <th colspan="5" rowspan="0">aeueua aeuaeu</th>
            <th colspan="4" rowspan="0">aoeua aeuae</th>
            <th colspan="9" rowspan="0">aeuaeuaeuaeua</th>
        </tr>
        <tr>
            <th colspan="1" rowspan="1">aoeu aeua</th>
            <th colspan="1" rowspan="1">aeu aeua</th>
            <th colspan="1" rowspan="1">aeuaeuaeu</th>
            <th colspan="1" rowspan="1">aeu aeu aeuaeu</th>
            <th colspan="1" rowspan="1">aeu aeu</th>
            <th colspan="1" rowspan="1">aeuaeuae</th>
            <th colspan="1" rowspan="1">near aeu</th>
            <th colspan="1" rowspan="1">eui</th>
            <th colspan="1" rowspan="1">uei</th>
            <th colspan="1" rowspan="1">euer</th>
            <th colspan="1" rowspan="1">aoeu</th>
            <th colspan="1" rowspan="1">eua</th>
            <th colspan="1" rowspan="1">loe</th>
            <th colspan="1" rowspan="1">oeu</th>
            <th colspan="1" rowspan="1">uou</th>
            <th colspan="1" rowspan="1">sec events</th>
            <th colspan="1" rowspan="1">evn aoeuaeo</th>
            <th colspan="1" rowspan="1">euoe auae</th>
            <th colspan="1" rowspan="1">euue oeueuo</th>
            <th colspan="1" rowspan="1">othre aeuae aeuaeu</th>
        </tr>
        </thead>
    </table>

检查这个小提琴的jsfiddle

文章来源: Table colspan and rowspan breaking in FireFox but not Chrome