Posso colorare le colonne della tabella usando i CSS senza colorare le singole celle?

121

C'è un modo per colorare le campate delle colonne fino in fondo. Vedere l'esempio di partenza di seguito:

<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>
Espandi lo snippet

E sto cercando un modo migliore (meno codice, colorazione non individuale) per colorare, ad esempio, le sezioni "Motore" e "Corpo", comprese tutte le celle sottostanti in #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>
Espandi lo snippet

html  css 
— Dennis
fonte
20
@zipzit: non c'è niente di sbagliato nelle tabelle se hai effettivamente bisogno di una tabella, cioè se i dati sono di natura tabulare (come una tabella di prodotti con i prezzi). La critica alle tabelle è contro il loro utilizzo come strumento di layout.
— sleske
5
Mi chiedo come sia entrato in Hot Network Questions
— Mr. Alien
è stato chiesto ieri e al momento, ha 24 voti positivi su Q e 43 su A, e la risposta accettata era ed è ancora votata come un matto
— Dennis
2
alle persone piace imparare cose che non sapevano, sia che si tratti di una peculiarità documentata dell'analisi dei numeri jQuery, o di un tag / concetto HTML che fa cose pulite, non sapevano :)
— Dennis
1
@canon eh sì, comunque risposta decente ...
— Mr. Alien

Risposte:

167

Sì, puoi ... utilizzando l' <col>elemento:

.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>
Espandi lo snippet

Nota : è possibile utilizzare l' spanattributo per applicare la definizione di colonna a più di una colonna.
Vedi anche :<colgroup>

— canone
fonte
10
Nota che avrai bisogno <col span="3" />per le colonne spanning.
— Niet the Dark Absol
È piuttosto inutile usare un colgroupche contiene tutte le colonne.
— Jukka K. Korpela
14
@ JukkaK.Korpela Viene analizzato in questo modo indipendentemente dal fatto che tu lo specifichi o meno, proprio come <tbody>. Preferisco semplicemente specificare.
— canonico
Vedo che l'uso del coltag non è così comune, ma lo uso sempre per le larghezze delle colonne
— Koen.
3
Nel caso in cui qualcun altro sia curioso del motivo per cui funziona o quali proprietà CSS possono essere utilizzate sulle colonne, le sezioni pertinenti delle specifiche CSS 2.1 sono 17.3 e 17.5.1 .
— Meriton
18

Puoi usare il nth-childselettore per questo:

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>
Espandi lo snippet

— Markus Kottländer
fonte
1
Lo styling da colsoli è molto meglio di così (più pulito e più veloce).
— tomasz86
9

In genere è più semplice applicare uno stile alle celle (per colonna se lo si desidera), ma è possibile applicare stili alle colonne in modi diversi. Un modo semplice è avvolgere le colonne in un colgroupelemento e impostare gli stili su di esso. Esempio:

<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>
Espandi lo snippet

— Jukka K. Korpela
fonte
1
Se i singoli colelementi all'interno delle colgroups non hanno bisogno di essere stilizzati individualmente, puoi anche impostare l' spanattributo su colgroupse stesso - <colgroup span="2">- invece di posizionare colelementi al suo interno.
— misterManSam
5

Puoi usare 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>
Espandi lo snippet

— leo60228
fonte
5

Per questo nth-childuserei la pseudo-classe css:

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

Mostra snippet di codice

— Howard Renollet
fonte
5

Il seguente attrezzo è il selettore dell'ennesimo figlio e dovrebbe funzionare ...

<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>
— eat-sleep-code
fonte
Probabilmente vuoi un >tra tr e td, dal momento che ti sei preso la briga di selezionare tds solo all'interno di trs solo all'interno delle tabelle ... (attenzione ai gruppi di tabelle.)
— ANeves
Grazie per la risposta, questa è una soluzione diversa
— Mohammad Kermani
Questo è un eccesso. Specificare eccessivamente è dannoso per le prestazioni. table tr tdè ridondante in quanto tds sono sempre dentro tre table.
— tomasz86
4

La mia versione che utilizza espressioni nth-child:

Utilizzando il concetto CSS delle regole a cascata per prima cosa colorare le celle e poi per scolorire quelle voglio che siano trasparenti. Il primo selettore seleziona tutte le celle dopo la prima e il secondo seleziona la quinta cella in modo che sia trasparente.

<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>
Espandi lo snippet

Controlla questo interessante riferimento: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcs
fonte
1

Questa è una vecchia domanda con molte ottime risposte. Volevo solo aggiungere i selettori -ne nth-last-childche non sono ancora stati menzionati. Sono utili quando si applicano CSS a più colonne ma potrebbero non conoscere il numero di colonne prima dello stile o avere più tabelle con larghezze variabili.

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

— elPastor
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.