rowspanのあるテーブルでnth-childをスタイリングに使用するにはどうすればよいですか？

Question

私はrowspanを使用する1つの行を持つテーブルを持っています。だから、

<table> 
<tr> 
    <td>...</td><td>...</td><td>...</td> 
</tr> 
<tr> 
    <td rowspan="2">...</td><td>...</td><td>...</td> 
</tr> 
<tr> 
       <td>...</td><td>...</td> 
</tr> 
<tr> 
    <td>...</td><td>...</td><td>...</td> 
</tr> 
</table> 

は、私は他のすべての行に背景色を追加するn番目の-child擬似クラスを使用するようにしたいのですが、ROWSPANはそれをめちゃくちゃにされました。実際にその行をスキップして次の行に移動したいときは、rowspanを使って行の下の行に背景色を追加します。

nth-childにスマートな処理をさせたり、セレクタで[rowspan]を使用してこれを回避する方法はありますか？だから、この場合、背景色は1行目と4行目にしたいが、6行目、8行目、10行目（そのうち誰も行スパンを持たないので）の後ろにしたい。これは、行間が見えるような場合、n番目の子にnを1つ追加してから続けます。

おそらくこれまでありません解決策が、私は残念ながら、そこだけで:nth-child()でこれを行うには方法はないですか、そのことについてだけではCSSセレクタを使用して

Answer 1

:-)お願いしたいと思いました。これは、CSS's lack of a parent selectorと同様に、親のn番目の子である要素に基づいて純粋に選択する:nth-child()の性質と関係します（例えば、td[rowspan]が含まれていない場合にのみtrを選択することはできません） 。

---

CSSはあなたが:evenと組み合わせて使用​​することができた、しかし、欠けているjQueryのは:has()セレクタを持っている（それは対0インデックス付きだとしてではない:odd:nth-child()の1-指数）CSSに代わるものとして、フィルタリングのために：

$('tr:not(:has(td[rowspan])):even') 

jsFiddle preview

Answer 2

私は同様の問題を持っていたと私はちょうどそれらのTDの内側に背景を持つ行の背景をオーバーライド。あなたの望む結果に応じて、これもあなたのために働くかもしれませんか？

tr:nth-child(odd) { 
    background: #DDE; 
} 
tr:nth-child(odd) td[rowspan] { 
    background: #FFF; 
} 

もちろん、ヘッダーなどの他の行をクラスまたはthで上書きできます。私のために働くように見える何

Answer 3

は表示して以下の行にTDを置くことです：なし

<table> 
    <tr> 
     <td rowspan="2">2 rows</td> 
     <td>1 row</td> 
    </tr> 
    <tr> 
     <td style="display:none"></td> 
     <td>1 row</td> 
    </tr> 
</table> 

Answer 4

、TBODYによって別々のテーブルに何かしてみてください。

tbody tr:nth-child(odd){ 
 
    background: #00FFFF; 
 
} 
 
tbody tr:nth-child(even){ 
 
    background: #FF0000; 
 
} 
 

 
tbody:nth-child(odd) td[rowspan]{ 
 
    background: #00FFFF; 
 
} 
 
tbody:nth-child(even) td[rowspan]{ 
 
    background: #FF0000; 
 
}

<table> 
 
<tbody> 
 
<tr> 
 
\t <td rowspan="4">...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td rowspan="4">...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
    <td>...</td> 
 
</tr> 
 
</tbody> 
 
<tbody>  
 
<tr> 
 
\t <td rowspan="3">...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td rowspan="3">...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
<tr> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
\t <td>...</td> 
 
</tr> 
 
</tbody> 
 
</table> 
 
    
 

を

Answer 5

これまでの回答の組み合わせを使用してtrをdisplay=noneとプログラムで追加しました：

HTML

<table> 
    <tr> 
    <td>A</td> 
    <td>B</td> 
    <td>C</td> 
    </tr> 
    <tr> 
    <td rowspan=2>1</td> 
    <td rowspan=2>2</td> 
    <td>sub C 1</td> 
    </tr> 
    <tr> 
    <td>sub C 2</td> 
    </tr> 
    <tr> 
    <td>3</td> 
    <td>4</td> 
    <td>5</td> 
    </tr> 
    <tr> 
    <td>6</td> 
    <td>7</td> 
    <td>8</td> 
    </tr> 
</table> 

CSS

table tr:nth-child(2n) { 
    background-color: #F8ECE0; 
} 

jQueryの

$("<tr style='display:none'></tr>").insertAfter('tbody tr:has(td[rowspan])'); 

JSfiddleを参照してください。

Answer 6

これは、追加のマークアップを追加したい場合にのみCSSを使用して行うことができます。 <tbody>タグ内の行のすべての「グループ」をラップします。その後、すべての奇数tbodyに背景色を追加します。

tbody:nth-child(odd) { 
 
    background-color: yellow; 
 
}

<table> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 1</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td rowspan="2">tr 2+3</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    <tr> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 4</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 5</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 6</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 7</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 8</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 9</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
    <tbody> 
 
    <tr> 
 
     <td>tr 10</td> 
 
     <td>...</td> 
 
     <td>...</td> 
 
    </tr> 
 
    </tbody> 
 
</table>