html - attribute - ¿Cómo usar nth-child para diseñar con una tabla con rowpan?

css selectores

Question

Tengo una tabla que tiene una fila que utiliza rowpan. Asi que,

<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 usar la pseudo-clase nth-child para agregar un color de fondo a cada otra fila, pero el intervalo de filas lo está arruinando; agrega el color de fondo a la fila debajo de la fila con el intervalo de filas, cuando en realidad me gustaría que se salte esa fila y pase a la siguiente.

¿Hay alguna forma de hacer que nth-child haga algo inteligente o use [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 después de eso en 6, 8, 10, y así sucesivamente (ya que ninguno de ellos tiene filas de filas). Es como si veo un intervalo de filas, entonces quiero que nth-child agregue 1 a n y luego continúe.

Probablemente no haya solución para esto, pero pensé que le preguntaría :-)

Answer 1

Desafortunadamente, no hay manera de hacer esto con :nth-child() solo, o usando selectores de CSS solo para esa materia. Esto tiene que ver con la naturaleza de :nth-child() que selecciona puramente en función de un elemento que es el nth child de su padre, así como con la falta de CSS de un selector de padres (no puede seleccionar un tr solo si no contiene un td[rowspan] , por ejemplo).

Sin embargo, jQuery tiene el selector :has() que carece de CSS, que puede usar junto con :even (no :odd ya que tiene un índice de 0 frente a un índice de :nth-child() ) para filtrar como un alternativa a CSS:

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

Vista previa de jsFiddle

Answer 2

Intenta separar mesa por tbody, algo 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>
 <td rowspan="4">...</td>
 <td>...</td>
 <td>...</td>
 <td rowspan="4">...</td>
 <td>...</td>
</tr>
<tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
</tr>
<tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
</tr>
<tr>
 <td>...</td>
 <td>...</td>
    <td>...</td>
</tr>
</tbody>
<tbody>    
<tr>
 <td rowspan="3">...</td>
 <td>...</td>
 <td>...</td>
 <td rowspan="3">...</td>
 <td>...</td>
</tr>
<tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
</tr>
<tr>
 <td>...</td>
 <td>...</td>
 <td>...</td>
</tr>
</tbody>
</table>
    
  

Answer 3

Lo que parece funcionar para mí es poner un td en la fila de abajo con pantalla: ninguna

<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

Puede hacer esto usando solo CSS si está dispuesto a agregar un marcado adicional. Envuelve cada "grupo" de filas en una etiqueta <tbody> . Luego agrega un color de fondo a cada tbody extraño.

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>

Answer 5

Tuve un problema similar y simplemente anulé el fondo de la fila con fondos en el TD dentro de ellos. Dependiendo de su resultado deseado, esto puede funcionar para usted también?

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 6

Usé una combinación de respuestas anteriores para agregar tr ''s 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 .