5

折りたたまれた境界線と隣接する境界線、およびすべてのセルに標準の境界線がある HTML テーブルがあり、特定の行の境界線の色を別のものに変更したいと考えています。問題は、境界線が折りたたまれていて、隣接するセルの色 (または一般的にはスタイル) が異なる場合、ブラウザーが視覚的に受け入れられる方法でレンダリングされないことです。

ここに私のHTMLがあります:

<table>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
    <tr id="foo"><td>The border of these cells</td>
                 <td>is not uniformly red!</td></tr>
    <tr><td>Lorem</td><td>Ipsum</td></tr>
</table>

CSS:

table { border-collapse: collapse; border-spacing: 0 }
td { padding: 5px; border: 3px black solid; }
#foo td { border: 3px red solid; }

上記の JSFiddleもあります。

さまざまなブラウザーがどのようにレンダリングするか:

IE 7 (標準):

IE 7 標準

IE 8 および 9 (標準):

IE 8、9 規格

Firefox 11 (左の赤い境界線の微妙な視覚的アーティファクトと、角をレンダリングするために選択した風変わりな方法に注意してください):

FF11

クローム 18:

クロム 18

質問:視覚的に受け入れられるレンダリングを得るにはどうすればよいですか? そのレンダリングは、「赤い境界線は常に黒い境界線よりも優先される」という理想でしょうか?

説明:

私は何よりもまず、純粋な CSS ソリューションを探しています。

これが不可能な場合は、小規模でローカライズされた変更が必要な作業を行います (つまり、あらゆる場所のすべてのテーブルで行う必要があるものではありません)。

実際の Web サイトでは、境界線を制御するスタイルがユーザーの操作に基づいて動的に適用されるため、Javascript を使用できます。イベント ハンドラーは、これとほとんど同じコードでセットアップされます。

4

2 に答える 2

7

余分なマークアップなしでこのソリューションにたどり着きました: http://jsfiddle.net/fcalderan/PAJzK/12/

アイデアは、テーブルセルの境界線とテーブル要素の境界線の使用border-collapseと使用を避けることです。top/rightbottom-left

IE8、FX11、およびCH17で試しました。関連するCSSは次のとおりです

table {  
    border-spacing : 0;
    border-left    : 3px black solid;
    border-bottom  : 3px black solid;
}

td { 
    padding      : 5px; 
    border-right : 3px black solid; 
    border-top   : 3px black solid;
}

#foo td { border-color:red; }


/* border left red-coloured using :before pseudoelement */
#foo td:first-child:before { 
    content       : ""; 
    position      : relative;
    margin-left   : -8px;
    padding       : 8px 0 8px 5px;
    border-left   : 3px red solid;
}

/* top border of next rows red coloured */
#foo + tr td {  
    border-top: 3px red solid;  
}

ここで、強調表示された行が最後の行である場合に問題が発生します: その#foo + tr td場合、何にも一致しません: その場合、代わりにこのルールを書くことができます

#foo td:after {
   content    : "";
   position   : relative;
   margin     : 0 0 0 -8px;
   display    : block;
   width      : 100%;
   height     : 3px; 
   padding    : 0 8px;
   top        : 2px;
   margin-bottom : -6px;
   border-bottom : 3px red solid;
}

http://jsfiddle.net/fcalderan/PAJzK/14/の例を参照してください。

于 2012-03-29T11:15:26.467 に答える
1

id=before-fooたとえば、前の行とid=after-foo次の行に設定し、次のようなスタイルシートを追加して、追加のマークアップが必要です

#before-foo td {
  border-bottom-color: red; }
#after-foo td {
  border-top-color: red; }

デモ: http://jsfiddle.net/8C8Rd/

セルの角にまだ問題がある可能性があります (角が黒くなることがあります)。

これを単純な方法で行うことができない理由は、境界の折りたたみの効果が漠然と定義されており、ブラウザーでの実装に一貫性がなかったためです。CSS 2.1 ドラフトでは、このようなブラウザー依存の状況で色を残すことさえありました。最終的な CSS 2.1 仕様では、境界競合解決規則でこれに関する要件がありますが、それらは普遍的に実装されているわけではありません。この場合、上の行のセルの境界が優先されると言われています (テストしたほとんどのブラウザーと同様)。 、したがって、説明するレンダリングを直接指定する方法はありません。つまり、前の行にもいくつかのスタイルを設定する必要があります。

于 2012-03-29T11:01:35.527 に答える