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
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.