Posso colorir as colunas da tabela usando CSS sem colorir células individuais?

121

Existe uma maneira de colorir vãos de colunas todo o caminho para baixo. Veja o exemplo inicial abaixo:

<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>
Expandir trecho

E estou procurando uma maneira melhor (menos código, coloração não individual) para colorir, por exemplo, extensões de "Motor" e "Corpo", incluindo todas as células abaixo delas em #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>
Expandir trecho

html  css 
— Dennis
fonte
20
@zipzit: Não há nada de errado com tabelas se você realmente precisa de uma tabela - ou seja, se os dados são tabulares por natureza (como uma tabela de produtos com preços). A crítica das tabelas é contra seu uso como ferramenta de layout.
— sleske
5
Gostaria de saber como isso entrou no Hot Network Questions
— Sr. Alien
foi perguntado ontem e a partir de agora, tem 24 votos positivos em Q e 43 em A, e a Resposta aceita foi e ainda está sendo votada como louca
— Dennis
2
as pessoas gostam de aprender coisas que não sabiam, seja uma peculiaridade documentada de análise de número jQuery ou um conceito / tag HTML que faz coisas legais que elas não sabiam :)
— Dennis
1
@canon heh sim, de qualquer forma resposta decente ...
— Sr. Alien

Respostas:

167

Sim, você pode ... usando o <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>
Expandir trecho

Nota : Você pode usar o spanatributo para fazer a definição de col se aplicar a mais de uma coluna.
Veja também :<colgroup>

— cânone
fonte
10
Observe que você precisará <col span="3" />para as colunas abrangentes.
— Niet the Dark Absol
É bastante inútil usar um colgroupque contenha todas as colunas.
— Jukka K. Korpela
14
@ JukkaK.Korpela Ele é analisado dessa forma independentemente de você especificá-lo ou não, exatamente como <tbody>. Eu simplesmente prefiro especificar.
— cânone
Vejo que o uso da coltag não é tão comum, mas sempre a uso para larguras de coluna
— Koen.
3
Caso alguém esteja curioso para saber por que isso funciona, ou quais propriedades CSS podem ser usadas em colunas, as seções pertinentes das especificações CSS 2.1 são 17.3 e 17.5.1 .
— Meriton
18

Você pode usar o nth-childseletor para:

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>
Expandir trecho

— Markus Kottländer
fonte
1
Modelar- colse é muito melhor do que isso (mais limpo e mais rápido).
— tomasz86
9

Geralmente é mais simples estilizar células (por coluna, se desejado), mas as colunas podem ser estilizadas de maneiras diferentes. Uma maneira simples é envolver colunas em um colgroupelemento e definir estilos nele. Exemplo:

<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>
Expandir trecho

— Jukka K. Korpela
fonte
1
Se os colelementos individuais dentro de colgroups não precisam ser estilizados individualmente, você também pode definir o spanatributo em colgroupsi - <colgroup span="2">- em vez de colocar colelementos dentro dele.
— misterManSam
5

Você pode usar 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>
Expandir trecho

— leo60228
fonte
5

Eu usaria a nth-childpseudoclasse css para isso:

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

Exibir trecho de código

— Howard Renollet
fonte
5

O seguinte implemento é o seletor enésimo filho e deve funcionar ...

<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>
— coma-sono-código
fonte
Você provavelmente quer um >entre tr e td, já que se deu ao trabalho de selecionar tds apenas dentro de trs apenas dentro de tabelas ... (preste atenção aos tablegroups.)
— ANeves
Obrigado pela resposta, esta é uma solução diferente
— Mohammad Kermani
Isso é um exagero. Especificar excessivamente é ruim para o desempenho. table tr tdé redundante, pois tds estão sempre dentro de tre table.
— tomasz86
4

Minha versão usando expressões enésimas crianças:

Usando o conceito CSS de regras em cascata para primeiro colorir as células e depois descolorir aquelas que quero que fiquem transparentes. O primeiro seletor seleciona todas as células após o primeiro, e o segundo seleciona a quinta célula para ser 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>
Expandir trecho

Verifique esta referência interessante: http://learn.shayhowe.com/advanced-html-css/complex-selectors/

— Marcs
fonte
1

Esta é uma velha questão com muitas respostas excelentes. Só queria adicionar os seletores -ne nth-last-childque ainda não foram mencionados. Eles são úteis ao aplicar CSS a várias colunas, mas podem não saber o número de colunas antes do estilo ou ter várias tabelas com larguras variadas.

/* 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
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.