0
votes

Style d'une ligne ou d'une colonne spécifique d'un tableau HTML à l'aide de la classe css pour le tableau

J'ai une table en html avec une classe CSS "style". Comment cette classe doit-elle être utilisée pour styliser une ligne ou une colonne spécifique dans le tableau?

Voici le code HTML:

<table class="style">
  <tbody>
    <tr>
      <td>1</td><td>2</td><td>3</td>
    </tr>
    <tr>
      <td>4</td><td>5</td><td>6</td>
    </tr>
    <tr>
      <td>7</td><td>8</td><td>9</td>
    </tr>
  </tbody>
</table>

Je veux styliser la première ligne seule. Cela peut être fait si nous avons une classe pour la première balise tr uniquement. Mais comment faire de même en utilisant la classe "style"?

html css html-table

0 commentaires

3 Réponses :

-1
votes

Utilisez CSS: nth-child Selector Voici le lien pour votre référence.

Exemple .style tr: nth-child (1) {background: red; }

3 commentaires

Mais comment utiliser nth-child dans le "style" de classe ci-dessus?

.style est votre classe et TR est l'élément nth-child (1) est le premier élément TR, pour cela, vous devez utiliser le format CSS à l'exception du CSS en ligne

Je suis heureux de vous aider. Veuillez accepter la solution et la voter

0
votes

Vous pouvez utiliser le sélecteur de pseudo classe appelé nth-child qui prend le paramètre du numéro de la position de l'élément.

Voici un exemple

<table class="style">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-child(odd) {
  background: black;
}

.style tr:nth-child(even) {
  background: white;
}

Ou vous pouvez utiliser un autre sélecteur de pseudo-classe appelé nième de type .

Voici un exemple

<table class="style">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-of-type(1) {
  background: red;
}

.style tr:nth-of-type(2) {
  background: blue;
}

.style tr:nth-of-type(3) {
  background: green;
}

et voici une autre façon d'utiliser un autre paramètre pair ou impair sur le pseudo sélecteur de classe nième enfant . p>

Exemple

<table class="style">
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
  <tr>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
  <tr>
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
</table>

.style {
  border: 1px solid olive;
  width: 100px;
}

.style tr:nth-child(1) {
  background: red;
}

.style tr:nth-child(2) {
  background: blue;
}

.style tr:nth-child(3) {
  background: green;
}

0 commentaires

1
votes

Vous pouvez essayer l'extrait ci-dessous.
Voici l'explication du : nth-child ( ) .

<table class="style">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
    <tr>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
    <tr>
      <td>7</td>
      <td>8</td>
      <td>9</td>
    </tr>
  </tbody>
</table>

.style tbody>:nth-child(1) {
  background: red;
}

2 commentaires

Mais cette solution peut affecter les autres éléments de la page, si plusieurs balises tbody sont présentes. Il fait la chose la plus sûre en utilisant la classe pour un élément particulier.

@Shadow vérifie à nouveau, ce ne sera pas le cas.