2

次のhtmlコードを持つ：

<table>
<tr><th>First</th><th class='second'>Second</th><th class='third'>Third</th><th>Fourth</th></tr>
<tr><td>Mike</td><td colspan=2 >John</td><td>Paul</td></tr>
</table>​

そして次のcss：

table {
    border-collapse: collapse;
}

td, th {
border: 1px black solid;
}

td {
    border-top: none;
}
th {
    border-bottom: none;
}
th.second {
    border-bottom: 3px green solid;
}
th.third {
}

結果として、2 番目のセルの下に 3px の実線の緑の線がある 1 つのテーブルが期待されます。Chrome の代わりに、2 番目と 3 番目のセルの両方の下に緑色の実線の境界線があります。

Firefox では、結果は期待どおりです。これはブラウザのバグですか、それとも私のコードは違法ですか?

http://jsfiddle.net/tt6aP/3/で例を見ることができます

PS：設定してみてください

th.third {
    border-bottom: 2px solid red;
}

そして、それを3pxに上げてみてください。これはさらに奇妙です。

スクリーンショット

期待される： Firefox で表示されるテーブル

クロム： クロームで見たテーブル

ファイアフォックス: Firefox で表示されるテーブル

4

2 に答える 2

1

バグかどうかはわかりませんが、この問題に出くわしたとき、単純な回避策を思いつきました。ボーダー スタイルを適用する行/列を余分に挿入することです。

<table>
    <tr>
        <th>Ano</th>
        <th class='first'>First</th>
        <th class='second'>Second</th>
        <th class='third'>Third</th>
    </tr>
    <tr class='hack'>
        <td></td>
        <td></td>
        <td></td>
        <td></td>        
    </tr>
    <tr>
        <td>Mike</td>
        <td colspan=2 >John</td>
        <td>Paul</td>
    </tr>
</table>

CSSは次のとおりです。

table {
    border-collapse: collapse;
}
tr.hack > td {
    height:0px;
}
td, th {
    border: 1px black solid;
}
tr.hack > td, td {
    border-top: none;
}
tr.hack > td, th {
    border-bottom: none;
}
th.first {
    border-bottom: 3px green solid;
}
th.second {
}
th.third {
}

ここでクロムでこれをテストしました

于 2013-01-01T20:36:27.993 に答える