2012-03-09 1 views
7

私は次の表を持っています。最初の行には2つのサブラインが含まれ、2つ目のサブラインには3つのサブラインが含まれています。Htmlマルチラインテーブル(rowspan) - ゼブラの正しい方法は?

このCSSスタイルWhith、ゼブラ色(二つの連続した行にすなわち代替色)が故障している、第二主細胞は灰色、白色、およびないものでなければならない:

tr:nth-child(odd) {background-color: #eee;} 
tr:nth-child(even) {background-color: #fff;} 

Faulty zebra with nth-child css

だからそのようなテーブルの色をゼブラ色にする方法はありますか?

もちろん、私の本当の問題は、はるかに多くの行数のサブラインを扱っています。

<head> 
    <style> 
     tr:nth-child(odd) {background-color: #eee;} 
     tr:nth-child(even) {background-color: #fff;} 
    </style> 
<head> 
<body> 
    <table border="1"> 
     <tr> 
      <td rowspan="2"> 
       Big1 
      </td> 
      <td> 
       small1 
      </td> 
     </tr> 
     <tr> 
      <td> 
       small2 
      </td> 
     </tr> 
     <tr> 
      <td rowspan="3"> 
       Big2 
      </td> 
      <td> 
       small1 
      </td> 
     </tr> 
     <tr> 
      <td> 
       small2 
      </td> 
     </tr> 
     <tr> 
      <td> 
       small3 
      </td> 
     </tr> 
    </table> 
</body> 
+0

「ゼブラ色」とは何ですか? – Oded

+0

ゼブラ色の定義が追加されました:2つの連続する行の色が交互に表示されます – Vinzz

+0

シマウマのストライプはどのように見えますか? – BoltClock

答えて

1

レイアウト通りに動作します。

それは灰色になり

<tr> 
     <td rowspan="2"> 
      Big1 
     </td> 
     <td> 
      small1 
     </td> 
    </tr> 

として働いありえないが、それは等(奇数)最初TR(偶数)

<tr> 
     <td> 
      small2 
     </td> 
    </tr> 

白になり、その第二のTR

ですそれを行う最良の方法は、問題のtrに「奇数」クラスと「偶数」クラスを手動で割り当てることです。

+0

実際、私は同じ結論に達しました。ありがとう、あなたはポイントを持っている – Vinzz

関連する問題