Puis-je colorier les colonnes du tableau en utilisant CSS sans colorer les cellules individuelles?

121

Existe-t-il un moyen de colorer les étendues de colonnes tout en bas? Voir l'exemple de départ ci-dessous:

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
Développer l'extrait

Et je recherche un meilleur moyen (moins de code, coloration non individuelle) de colorer, par exemple, les travées "Moteur" et "Corps", y compris toutes les cellules situées en dessous dans #DDD

<style>
  .color {
    background-color: #DDD
  }
</style>
<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
Développer l'extrait

html css Dennis
la source
20
@zipzit: Il n'y a rien de mal avec les tableaux si vous avez réellement besoin d' un tableau - c'est-à-dire si les données sont de nature tabulaire (comme un tableau de produits avec des prix). La critique des tableaux est contre leur utilisation comme outil de mise en page.
sleske
5
Je me demande comment cela est entré dans Hot Network Questions
Mr. Alien
il a été demandé hier et à partir de maintenant, a 24 votes positifs sur Q et 43 sur A, et la réponse acceptée était et est toujours votée comme un fou
Dennis
2
les gens aiment apprendre des choses qu'ils ne savaient pas, que ce soit une particularité documentée de l'analyse des nombres jQuery, ou une balise / concept HTML qui fait des choses intéressantes, ils ne savaient pas :)
Dennis
1
@canon heh oui, de toute façon réponse décente ...
Mr. Alien

Réponses:

167

Oui, vous pouvez ... en utilisant l' <col>élément:

.grey {
  background-color: rgba(128,128,128,.25);
}
.red {
  background-color: rgba(255,0,0,.25);
}
.blue {
  background-color: rgba(0,0,255,.25);
}
<table>
  <colgroup>
    <col class="grey" />
    <col class="red" span="3" />
    <col class="blue" />
  </colgroup>
  <thead>
    <tr>
      <th>#</th>
      <th colspan="3">color 1</th>
      <th>color 2</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>1</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>
      <td>blue</td>
    </tr>
    <tr>
      <th>2</th>
      <td>red</td>
      <td>red</td>
      <td>red</td>      
      <td>blue</td>
    </tr>
  </tbody>
</table>
Développer l'extrait

Remarque : vous pouvez utiliser l' spanattribut pour que la définition de col s'applique à plusieurs colonnes.
Voir aussi :<colgroup>

canon
la source
10
Notez que vous aurez besoin <col span="3" />des colonnes s'étendant.
Niet the Dark Absol
Il est plutôt inutile d'utiliser un colgroupqui contient toutes les colonnes.
Jukka K. Korpela
14
@ JukkaK.Korpela Il est analysé de cette façon, que vous le spécifiez ou non, comme <tbody>. Je préfère simplement préciser.
canon
Je vois que l'utilisation de la colbalise n'est pas si courante, mais je l'utilise toujours pour les largeurs de colonne
Koen.
3
Au cas où quelqu'un d'autre serait curieux de savoir pourquoi cela fonctionne ou quelles propriétés CSS peuvent être utilisées sur les colonnes, les sections pertinentes de la spécification CSS 2.1 sont 17.3 et 17.5.1 .
meriton
18

Vous pouvez utiliser le nth-childsélecteur pour cela:

tr td:nth-child(2),
tr td:nth-child(3) {
  background: #ccc;
}
<table>
  <tr>
    <th colspan="2">headline 1</th>
    <th>headline 2</th>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
    <td>column 3</td>
  </tr>
</table>
Développer l'extrait

Markus Kottländer
la source
1
Se coiffer colest bien meilleur que cela (plus propre et plus rapide).
tomasz86
9

Il est généralement plus simple de styliser les cellules (par colonne si vous le souhaitez), mais les colonnes peuvent être stylisées de différentes manières. Un moyen simple consiste à envelopper les colonnes dans un colgroupélément et à y définir des styles. Exemple:

<style>
.x {
    background-color: #DDD
}
</style>
<table border="1">
<col>
<colgroup class=x>
  <col>
  <col>
  <col>
</colgroup>
<col>
<colgroup class=x>
  <col>
  <col>
</colgroup>
  <tr>
    <th>Motor</th>
    <th colspan="3" class="color">Engine</th>
    <th>Car</th>
    <th colspan="2" class="color">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td class="color">4</td>
    <td>5</td>
    <td class="color">6</td>
    <td class="color">7</td>
  </tr>
  <tr>
    <td>7</td>
    <td class="color">1</td>
    <td class="color">2</td>
    <td class="color">3</td>
    <td>4</td>
    <td class="color">5</td>
    <td class="color">6</td>
  </tr>
</table>
Développer l'extrait

Jukka K. Korpela
la source
1
Si les coléléments individuels à l'intérieur du colgroups n'ont pas besoin d'être stylisés individuellement, vous pouvez également définir l' spanattribut sur colgrouplui-même - <colgroup span="2">- au lieu de placer des coléléments à l'intérieur.
misterManSam
5

Vous pouvez utiliser CSS3: http://jsfiddle.net/snuggles08/bm98g8v8/

<style>
  .table td:nth-of-type(1) {
    background: red;
  }
  .table td:nth-of-type(5) {
    background: blue;
  }
  .table td:nth-of-type(3) {
    background: green;
  }
  .table td:nth-of-type(7) {
    background: lime;
  }
  .table td:nth-of-type(2) {
    background: skyblue;
  }
  .table td:nth-of-type(4) {
    background: darkred;
  }
  .table td:nth-of-type(6) {
    background: navy;
  }
</style>
Styled table:
<table border="1" class="table">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
<hr>Unstyled table:
<table border="1" class="table2">
  <tbody>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
      <td>7</td>
    </tr>
    <tr>
      <td>7</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
      <td>6</td>
    </tr>
  </tbody>
</table>
Développer l'extrait

leo60228
la source
5

J'utiliserais la nth-childpseudo-classe css pour cela:

tr td:nth-child(2), tr th:nth-child(2), tr td:nth-child(3), tr td:nth-child(4), tr th:nth-child(4), tr td:nth-child(6), tr td:nth-child(7){
    background-color: #DDD;
}

Afficher l'extrait de code

Howard Renollet
la source
5

L'implémentation suivante est le sélecteur nième enfant et devrait fonctionner ...

<style type="text/css">
    th:nth-child(2),
    th:nth-child(4)
    {
        background-color: rgba(255, 0, 0, 1.0);
    }

    td:nth-child(2), 
    td:nth-child(3),
    td:nth-child(4),
    td:nth-child(6),
    td:nth-child(7)
    {
        background-color: rgba(255, 0, 0, 0.5);
    }
</style>
code-mange-sommeil
la source
Vous voulez probablement un >entre tr et td, puisque vous vous êtes donné la peine de sélectionner des tds uniquement à l'intérieur des tables uniquement à l'intérieur des tables ... (attention aux groupes de tables.)
ANeves
Merci pour la réponse, c'est une solution différente
Mohammad Kermani
C'est une exagération. La sur-spécification est mauvaise pour les performances. table tr tdest redondant car tds sont toujours à l'intérieur tret table.
tomasz86
4

Ma version utilisant les expressions nth-child:

Utiliser le concept CSS de règles en cascade pour colorer d'abord les cellules, puis décolorer celles que je veux être transparent. Le premier sélecteur sélectionne toutes les cellules après la première, et le second sélectionne la cinquième cellule pour être transparente.

<style type="text/css">
  /* colored */
  td:nth-child(n+2) { background-color: #ddd }
  /* uncolored */
  td:nth-child(5) { background-color: transparent }
</style>

<table border="1">
  <tr>
    <th>Motor</th>
    <th colspan="3">Engine</th>
    <th>Car</th>
    <th colspan="2">Body</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>7</td>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</table>
Développer l'extrait

Consultez cette référence intéressante: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

Marcs
la source
1

C'est une vieille question avec beaucoup de bonnes réponses. Je voulais juste ajouter les sélecteurs -net nth-last-childqui n'ont pas encore été mentionnés. Ils sont utiles lors de l'application du CSS à plusieurs colonnes, mais peuvent ne pas connaître le nombre de colonnes avant le style, ou avoir plusieurs tables avec des largeurs variables.

/* Select the first two */
table tr td:nth-child(-n + 2) {
  background-color: lightblue;
}

/* Select all but the first two */
table tr td:not(:nth-child(-n + 2)) {
    background-color:lightgreen;
}

/* Select last two only */
table tr td:nth-last-child(-n + 2) {
  background-color:mistyrose;
}

/* Select all but the last two */
table tr td:not(:nth-last-child(-n + 2)) {
    background-color:yellow;
}

jsFiddle: https://jsfiddle.net/3rpf5oht/2/

elPasteur
la source