Cómo usar nth-child para diseñar con una tabla con rowspan?

Question

Tengo una tabla que tiene una fila que usa rowspan. Así,

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

Me gustaría utilizar la pseudo-clase nth-child añadir un color de fondo para cada dos filas, pero el rowspan es jugar hacia arriba; agrega el color de fondo a la fila debajo de la fila con el rowspan, cuando de hecho me gustaría omitir esa fila, y pasar a la siguiente.

¿Hay alguna manera de hacer que nth-child haga algo inteligente, o usar [rowspan] en el selector para evitar esto? Entonces, en este caso, me gustaría que el color de fondo esté en las filas 1 y 4, pero luego después en 6, 8, 10, y así sucesivamente (ya que ninguno de ellos tiene filas). Es como si veo un rowspan, luego quiero que nth-child agregue 1 a n y luego continúe.

Es probable que ninguna solución para esto, pero pensé en preguntar :-)

Answer 1

Desafortunadamente, no hay manera de hacer esto con :nth-child() solo, o mediante el uso de selectores CSS solo para el caso. Esto tiene que ver con la naturaleza de :nth-child() que selecciona puramente en función de que un elemento sea el enésimo hijo de su elemento primario, así como con CSS's lack of a parent selector (no puede seleccionar un tr solo si no contiene un td[rowspan], por ejemplo) .

---

jQuery tiene el selector :has() que el CSS carece, sin embargo, que se puede utilizar en conjunción con :even (no :odd ya que es 0-indexado frente :nth-child() 's 1-índice) para el filtrado como una alternativa a CSS :

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

jsFiddle preview

Answer 2

tuve un problema similar y simplemente hicieron caso omiso del fondo fila con fondos en el interior de la TD de ellos. Dependiendo de su resultado deseado, ¿esto también puede funcionar para usted?

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

Por supuesto, puede anular otras filas como encabezados, etc. con una clase o th.

Answer 3

Lo que parece funcionar para mí es poner un TD en la fila de abajo 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

Trate de tabla separada por tbody, algo así como:

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

Utilicé una combinación de respuesta anterior para agregar tr con display=none programáticamente:

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

Ver el JSfiddle.

Answer 6

Puede hacerlo solo con CSS si está dispuesto a agregar un marcado adicional. Envuelva cada "grupo" de filas en una etiqueta <tbody>. A continuación, agregue un color de fondo a cada tbody impar.

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>