Come usare nth-child per lo styling con una tabella con rowspan?

Question

Ho una tabella che ha una riga che utilizza rowspan. Così,

<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> 

mi piacerebbe utilizzare la nth-child pseudo-classe per aggiungere un colore di sfondo per tutte le altre righe, ma il rowspan è scompigliando in su; aggiunge il colore di sfondo alla riga sotto la riga con il rowspan, quando in realtà mi piacerebbe saltare quella riga e passare alla successiva.

C'è un modo per fare in modo che nth-child faccia qualcosa di intelligente o usare [rowspan] nel selettore per aggirare questo problema? Quindi, in questo caso, mi piacerebbe che il colore dello sfondo fosse sulle righe 1 e 4, ma successivamente su 6, 8, 10 e così via (dato che nessuno di questi ha riquadri)? È come se vedo un rowspan, quindi voglio che nth-child aggiunga 1 a n e poi continui.

Probabilmente nessuna soluzione a questo, ma ho pensato di chiedere :-)

Answer 1

Purtroppo, non c'è modo di fare questo con :nth-child() da solo, oppure utilizzando i selettori CSS solo per quella materia. Questo ha a che fare con la natura di :nth-child() che seleziona esclusivamente in base a un elemento che è l'ennesimo figlio del suo genitore, nonché con CSS's lack of a parent selector (non è possibile selezionare un tr solo se non contiene uno td[rowspan], ad esempio) .

---

jQuery ha il selettore :has() che CSS manca, però, che è possibile utilizzare in combinazione con :even (non :odd come è 0-indicizzato contro :nth-child() 's 1-indice) per il filtraggio come alternativa al CSS :

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

jsFiddle preview

Answer 2

ho avuto un problema simile e ho appena overrode sfondo fila con sfondi sul all'interno del TD di loro. A seconda del risultato desiderato, questo potrebbe funzionare anche per te?

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

Ovviamente è possibile eseguire l'override di altre righe come intestazioni, ecc. Con una classe o th.

Answer 3

Ciò che sembra funzionare per me è quello di mettere un TD nella riga sottostante con display: none

<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

Prova a tavolo separato da tbody, qualcosa come:

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

Ho utilizzato una combinazione di risposta precedente per aggiungere tr con display=none in modo programmatico:

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])'); 

Vedere la JSfiddle.

Answer 6

È possibile farlo utilizzando solo CSS se si desidera aggiungere ulteriori markup. Avvolgi ogni "gruppo" di righe in un tag <tbody>. Quindi aggiungi un colore di sfondo a ogni dispari 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>