Czy mogę pokolorować kolumny tabeli za pomocą CSS bez kolorowania poszczególnych komórek?

121

Czy istnieje sposób na pokolorowanie rozpiętości kolumn w dół? Zobacz przykład początkowy poniżej:

<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>
Rozwiń fragment

Szukam lepszego sposobu (mniej kodu, nieindywidualne kolorowanie) na kolorowanie, na przykład rozpiętości „silnika” i „ciała”, w tym wszystkie komórki pod nimi w #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>
Rozwiń fragment

html css Dennis
źródło
20
@zipzit: Nie ma nic złego w tabelach, jeśli faktycznie potrzebujesz tabeli - tj. jeśli dane mają charakter tabelaryczny (jak tabela produktów z cenami). Krytyka tabel jest przeciwko używaniu ich jako narzędzia do układania.
sleske
5
Ciekawe, jak to się pojawiło w Hot Network Pytania
Mr. Alien
zostało zadane wczoraj i od teraz ma 24 głosy za na Q i 43 na A, a zaakceptowana odpowiedź była i nadal jest uznawana za szaloną
Dennis
2
ludzie lubią uczyć się rzeczy, których nie znali, czy to udokumentowanej osobliwości parsowania liczb jQuery, czy tagu / koncepcji HTML, która robi fajne rzeczy, o których nie wiedzieli :)
Dennis
1
@canon heh tak, w każdym razie przyzwoita odpowiedź ...
Mr. Alien

Odpowiedzi:

167

Tak, możesz ... używając <col>elementu:

.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>
Rozwiń fragment

Uwaga : Możesz użyć spanatrybutu, aby definicja kolumny miała zastosowanie do więcej niż jednej kolumny.
Zobacz też :<colgroup>

kanon
źródło
10
Pamiętaj, że będziesz potrzebować <col span="3" />kolumn rozpinających.
Niet the Dark Absol
Nie ma sensu używać elementu colgroupzawierającego wszystkie kolumny.
Jukka K. Korpela
14
@ JukkaK.Korpela Jest analizowany w ten sposób, niezależnie od tego, czy go określisz - tak jak <tbody>. Po prostu wolę sprecyzować.
kanon
Widzę, że użycie coltagu nie jest tak powszechne, ale używam go zawsze dla szerokości kolumn
Koen.
3
W przypadku gdyby ktoś był ciekawy, dlaczego to działa lub które właściwości CSS mogą być użyte w kolumnach, odpowiednie sekcje specyfikacji CSS 2.1 to 17.3 i 17.5.1 .
meriton
18

Możesz do tego użyć nth-childselektora:

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>
Rozwiń fragment

Markus Kottländer
źródło
1
Sama stylizacja coljest o wiele lepsza niż ta (czystsza i szybsza).
tomasz86
9

Ogólnie rzecz biorąc, najłatwiej jest stylizować komórki (w razie potrzeby według kolumny), ale kolumny można określać na różne sposoby. Prostym sposobem jest zawijanie kolumn w colgroupelemencie i ustawianie dla niego stylów. Przykład:

<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>
Rozwiń fragment

Jukka K. Korpela
źródło
1
Jeśli poszczególne colelementy wewnątrz colgroups nie wymagają indywidualnego stylizowania, możesz również ustawić spanatrybut na samym colgroupsobie - <colgroup span="2">- zamiast umieszczać colw nim elementy.
misterManSam
5

Możesz użyć 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>
Rozwiń fragment

leo60228
źródło
5

Chciałbym użyć nth-childCSS pseudo-klasy do tego:

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

Pokaż fragment kodu

Howard Renollet
źródło
5

Poniższe narzędzie jest selektorem n-tego dziecka i powinno działać ...

<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>
kod jedzenia i snu
źródło
Prawdopodobnie chcesz mieć wartość >między tr a td, ponieważ zadałeś sobie trud wybierając tds tylko wewnątrz trs tylko w tabelach ... (uwaga na grupy tabel).
ANeves
Dzięki za odpowiedź, to jest inne rozwiązanie
Mohammad Kermani,
To przesada. Nadmierne specyfikowanie jest niekorzystne dla wydajności. table tr tdjest zbędne, ponieważ tdsą zawsze w środku tri table.
tomasz86
4

Moja wersja używająca wyrażeń nth-child:

Korzystanie z koncepcji CSS reguł kaskadowych, aby najpierw pokolorować komórki, a następnie odbarwić te, które chcę, aby były przezroczyste. Pierwszy selektor wybiera wszystkie komórki po pierwszej, a drugi wybiera piątą komórkę jako przezroczystą.

<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>
Rozwiń fragment

Sprawdź tę interesującą referencję: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

Marcs
źródło
1

To stare pytanie z wieloma świetnymi odpowiedziami. Chciałem tylko dodać selektory -ni nth-last-child, które nie zostały jeszcze wymienione. Są pomocne przy stosowaniu CSS do wielu kolumn, ale mogą nie znać liczby kolumn przed stylizacją lub mieć wiele tabel o różnych szerokościach.

/* 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
źródło