web-dev-qa-db-fra.com

Comment utiliser nth-child pour un style avec une table avec rowspan?

J'ai une table qui a une ligne qui utilise rowspan. Alors,

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

J'aimerais utiliser la pseudo-classe du nième enfant pour ajouter une couleur d'arrière-plan à chaque ligne, mais la ligne de rangée la dérange; il ajoute la couleur d'arrière-plan à la ligne située sous la ligne portant l'envergure, alors qu'en fait, j'aimerais qu'elle saute cette ligne et passe à la suivante.

Existe-t-il un moyen de demander à n-enfant de faire quelque chose d'intelligent ou d'utiliser [rowspan] dans le sélecteur pour résoudre ce problème? Donc dans ce cas, j'aimerais que la couleur de fond soit sur les rangées 1 et 4, mais ensuite sur les rangées 6, 8, 10, et ainsi de suite (puisqu'aucune de celles-ci n'a de rangée)? C'est comme si je voyais un rowspan, alors je veux que nth-child ajoute 1 à n puis continue.

Probablement pas de solution à cela, mais je pensais demander :-)

htmlcsscss3css-selectors
23
Elisabeth

Malheureusement, il n'y a aucun moyen de faire cela avec :nth-child() seul, ou en utilisant uniquement des sélecteurs CSS. Cela a à voir avec la nature de :nth-child() qui sélectionne uniquement en fonction d'un élément qui est le nième enfant de son parent, ainsi que de l'absence de sélecteur de parents dans CSS (vous ne pouvez pas sélectionner une tr uniquement si elle ne le fait pas. ne contient pas un td[rowspan], par exemple).

jQuery a le sélecteur :has() qui manque à CSS, mais que vous pouvez utiliser conjointement avec :even (et non :odd car il est indexé sur 0 et le index 1 de :nth-child()) pour le filtrage comme alternative au CSS:

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

Aperçu jsFiddle

16
BoltClock

Ce qui semble fonctionner pour moi est de mettre un td dans la ligne ci-dessous avec 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>
32
Sebastian Forster

J'ai eu un problème similaire et je viens de surcharger le fond de la ligne avec des arrière-plans sur le TD à l'intérieur. En fonction du résultat souhaité, cela peut-il également fonctionner pour vous?

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

Bien sûr, vous pouvez remplacer d'autres lignes telles que les en-têtes, etc. avec une classe ou th.

2
Chris

Essayez de séparer table par tbody, quelque chose comme:

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>

2
vitalii97

J'ai utilisé une combinaison de réponse précédente pour ajouter tr avec display=none par programmation:

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

Voir le JSfiddle .

0
hadrienj

Vous pouvez le faire en utilisant uniquement CSS si vous souhaitez ajouter du balisage supplémentaire. Enveloppez chaque "groupe" de lignes dans une balise <tbody>. Ajoutez ensuite une couleur de fond à chaque tbodyimpair.

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>

0
Steven Liekens