17

次のCSSルールが適用されたテーブルがあります。

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

代わりに、特定のセルに赤い境界線を付けたいです。

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

これは私が期待するようには機能しません。FireFox 3およびIE8では、次のようになります。

IE8/FF3レンダリング
（ソース：control-v.net）

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

IE7互換モードレンダリング
（ソース：control-v.net）

の4辺すべて<td>を赤にしたい。これどうやってするの？テストケースはここにあります。

4

4 に答える 4

25

しばらく前に読んだサイトに、この問題を適切に解決する別の投稿がありますが、見つかりませんでした。とにかく、アプローチはのdouble代わりにボーダースタイルを作ることでしsolidた。これは、doubleの方がsolidよりも優先度が高いために機能します。1pxまたは2pxの境界線では、線が重なっているため、二重線の間にギャップは表示されません。

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>

于 2014-10-09T18:24:06.207 に答える
8

border-collapseを使用することはできません。ただし、たとえば次のようにすることで、問題をある程度回避できます。

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

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

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

（うまくいけば）起こることは、td内のdivが2ピクセル外側に拡張し、黒い境界線を赤い境界線で覆うことです。

于 2009-08-06T22:22:08.127 に答える
7

疑似要素の使用：

これを実現するために、疑似要素を使用できます。

親要素に対して疑似要素を絶対的に配置し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>

于 2015-02-04T04:39:03.990 に答える
2

border-collapseは、tdに実際にはいくつかの境界線がないことを意味します。あなたはそれをするために他の方法を見つけなければならないでしょう。テーブルに背景を与え、すべての境界線を取り除きますが、tdマージンを残すと、素敵な境界線が得られます。次に、境界線を設定すると、内部境界線が得られると思います。それはうまくいくでしょうか？

于 2009-08-06T22:03:58.943 に答える