web-dev-qa-db-ja.com

境界線が折りたたまれたCSSの表の境界線の色

上記の値の合計であることを示すために、テーブルの一部のフィールドの上に線を入れたいと思います。ただし、テーブルにはデフォルトですでに境界線があります。

次に例を示します。境界線が折りたたまれたテーブルがあります。 1つのフィールドにborder-bottomを設定し、その下のフィールドにborder-topを設定しました。これらは両方とも同じ境界線を指定します。一番上のCSSが使用されます。一番下のものを使う方法はありますか？

<html>
    <head>
        <style type="text/css">
            table { border-collapse: collapse; }
            td.first { border-bottom: solid red 1px; }
            td.second { border-top: solid gold 1px; }
        </style>

    <body>
        <table>
            <tr><td class="first">Hello</td></tr>
            <tr><td class="second">World</td></tr>
        </table>
    </body>
</html>

これは、2つのセルの間に赤い線が表示されていることを示しています。ゴールドラインを取得する方法はありますか？

csshtml-tableborderborder-collapse
32
Sjoerd

これはborder-collapseの定義された動作です。 O'Reilly CSS Definitive Guide 3rd Editionの357ページには次のように書かれています。

折りたたみボーダーのスタイルと幅は同じであるが色が異なる場合は、セル、行、行グループ、列、列グループ、表の順に優先順位が高くなります。

2つの行など、同じタイプの要素から取得された場合...色は、一番上と一番左の境界から取得されます。

つまり、一番上の赤です。

これをオーバーライドする方法の1つは、色のセルを使用して、行の色に勝つことです。

例： http://jsfiddle.net/Chapm/

この「同じ色のルール」よりも優先順位が高いルール

広いボーダーが狭いボーダーに勝る

それとその後、

ソリッド、次に破線、ドット、リッジ、アウトセット、グルーブ、インセットの2倍の勝利

ゴールドの2pxを使用して勝つことができます。私はChromeを使用して1pxを使用しようとしましたが、doubleで、1px solidと表示され、赤を勝ち取りますただし、この方法を使用する場合は、サポートするブラウザーがこの手法を使用して同じように動作することを確認するのが最善の方法です。

http://jsfiddle.net/Chapm/2/

59
太極者無極而生

Border-collapseをSeparateに変更し、border-spacingをゼロに設定するだけです。

注：IE8は、！DOCTYPEが指定されている場合にのみ、border-spacingプロパティをサポートします。

<!DOCTYPE html>
<html>

<head>
  <style type="text/css">
    table {
      border-collapse: separate;
      border-spacing: 0px;
    }
    
    td.first {
      border-bottom: solid red 1px;
    }
    
    td.second {
      border-top: solid gold 1px;
    }
  </style>
</head>

<body>
  <table>
    <tr>
      <td class="first">Hello</td>
    </tr>
    <tr>
      <td class="second">World</td>
    </tr>
  </table>
</body>

</html>

win7でのテスト： Chrome 16、IE 9、FF 9、Safari 5.0.5。

5
Dalius I

削除する border-collapse: collapse;コードから、代わりにテーブルのcellspacing属性を0に設定します。

1
Chinmayee G

スタイルからtd.first { border-bottom: solid red 1px; }を削除するだけです。

または、redをtd.firstセレクターでgoldに変更します。

ここに例 。

0
Kyle