国境崩壊を使用している場合、単一のテーブルセルに境界線を適用します

Question

私は、次のCSSルールが適用されると、テーブルがあります：

table { border-collapse: collapse; }
td { border: 2px solid Gray; }

私の代わりに、特定の細胞が赤い枠を持っていると思います。

td.special { border: 2px solid Red; }

私が期待するように、

これは動作しません。 FireFoxの3およびIE8で、それはこのようになります：

の
<サブ>（ソース： control-v.net の）

（IE8での実行）IE7互換モードでは、このようになります

の
<サブ>（ソース： control-v.net の）

私は<td>のすべての4つの側面が赤になりたいです。これどうやってするの？ ここで見つけることができる。の

Answer 1

ボーダー崩壊を使用できなくなります。あなたはこれを行うことにより、例えば、いくぶんかの問題を回避することができます：

<td class="special"><div>Two</div></td>

次に、このようにスタイルを適用します：

.special div {
    border: 2px solid #f00;
    margin: -2px;
}

何（たぶん）起こることTD内部DIVが2つの画素で外側に拡張し、赤い境界線と黒の境界をカバーしている。

Answer 2

があり優雅に、この問題を解決し、私はしばらく前に読むサイト上の別のポストだが、私はそれを見つけることができませんでした。とにかく、アプローチではなくdoubleのボーダースタイルsolidを作ることでした。ダブルは固体よりも高い優先度を持っているので、これは動作します。線が重なるので、1つのピクセルまたは2ピクセルの境界線上に、二重線の間のギャップは表示されません。

table { border-collapse: collapse; }
td { border: 2px solid Gray; }
td.special { border: 2px double Red; }

<table>
    <tr><td>a</td><td>a</td><td>a</td></tr>
    <tr><td>a</td><td class="special">a</td><td>a</td></tr>
    <tr><td>a</td><td>a</td><td>a</td></tr>
</table>

Answer 3

擬似要素を使用して

あなたはこれを達成するために、擬似要素を使用することができます。

ただ、絶対に擬似要素を配置し、の相対的なの親td要素へ。擬似要素は親要素の全体の寸法を記入してください、そして、それに境界線を追加します。

ここでの例のの

table {
    border-collapse: collapse;
}
table td {
    position: relative;
    border: 1px solid #000;
    padding: 2px;
}
table td.selected:after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    bottom: 0; left: 0;
    border: 2px solid red;
}

<table>
    <tr>
        <td>One</td>
        <td>One</td>
        <td>One</td>
    </tr>
    <tr>
        <td>Two</td>
        <td class="selected">Two</td>
        <td>Two</td>
    </tr>
    <tr>
        <td>Three</td>
        <td>Three</td>
        <td>Three</td>
    </tr>
</table>