1

これを行う方法？テーブルの行の上下の境界線に異なる色を付けたいです。を使用するとChromeは正しくレンダリングしますが、それdisplay: blockが適切な方法であるかどうかはわかりません。ただし、IE8で動作させたいのですが、方法がわかりません。

Chrome で動作するフィドルを用意しました: http://jsfiddle.net/s6LQ7/

4

2 に答える 2

9

これは Firefox と IE8 で動作します:

table {
    width: 100%;
    border-collapse: separate; /* Not really necessary unless you use normalize.js */
    border-spacing: 0px; /* take out spaces between cells */
}

tr {
    background-color: #ccc;
}

td {
    width: 50%;
    border-top: 1px solid #f00; 
    border-bottom: 1px solid #0f0; /* move spacing to the cell */
}

上記は標準の HTML 表示システムを使用しているため、IE8 で動作します。私は持っている：

  • に設定border-collapseするとseparate、テーブルが境界線を折りたたむのを防ぎ、各境界線を描画します
  • セル間の間隔を削除するためにborder-spacingset を追加しました0px
  • ディレクティブを削除しdisplay、テーブルをテーブルとして表示できるようにしました
  • borderディレクティブを行ではなくセルに移動しました。

http://jsfiddle.net/s6LQ7/1/

于 2013-01-28T14:07:29.717 に答える
-1

行の代わりにセルに境界線を付けてみましたか? さらに、クラスをセレクターとして使用しない限り、ほとんどの CSS ルールは表のセルには適用されません。

于 2013-01-28T14:01:39.223 に答える