CSS3でテーブルシマシマ実装

Question

tr:nth-childを使ってシマシマを実装したいですが
よろしくお願いいたします。

<table width="200" border="1">
  <tr>
    <th colspan="2">&nbsp;</th>
  </tr>
  <tr>
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
    <tr style="background:#ccc">
    <td rowspan="3">#ccc</td>
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
    <tr>
    <td rowspan="3">&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr style="background:#ccc">
    <td rowspan="3">#ccc</td>
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
  <tr style="background:#ccc">
    <td>#ccc</td>
  </tr>
</table>

テーブルソース追加しました。
複数のtrが1行となるので
odd evenだけでは実装できませんが。

Comments

[WanOOOOOO]

そこまで分かればできるでしょ？

[rainbowsix]

html追加しました。

Answer 1

tableでrowspan使ってtrが余計にあるからという事ですね？

tr:nth-child(6n+5),
tr:nth-child(6n+6),
tr:nth-child(6n+7)
 {
    background-color: gray;
}

Comments

[hiim]

index間違ってたので修正しました

[rainbowsix]

いつもありがとうございます！
JSかCSSか悩むところでした。

Answer 2

nth-child(odd)とnth-child(even)で可能です。

http://designblog.ecstudio.jp/htmlcss/css3-nth-child.html