Question

我目前在Firefox中发生了一个有趣的UI错误。当页面在Chrome中呈现时，表格按预期工作。如果您希望在浏览器中看到问题，下面是一个带有bootstrap cdn的示例HTML页面。

在两个浏览器中运行此功能以查看差异。

＆＃13;

<!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>

＆＃13;

Answer 1

Firefox不喜欢您的rowspan=0属性。更改为rowspan=1，它会像Chrome一样呈现。

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

Answer 2

将rowspan =“0”更新为rowspan =“2”。

“使用rowspan =”0“（仅适用于Firefox和Opera 12及更早版本）：” 说 http://www.w3schools.com/tags/att_td_rowspan.asp

Answer 3

无需编写rowspan =“1”或rowspan =“0”和colspan =“1”或colspan =“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

表格colspan和rowspan在FireFox中断，但不是Chrome

3 个答案: