5

Eu sei eu como fazer uma tabela horizontalmente zebrada, ou seja, cada linha com cores alternadas (o famoso cor sim e cor não).

Eu queria saber agora como eu poderia pelo css alternar as cores das colunas: a primeira coluna de uma cor e a segunda de outra, tanto 'td' como 'th'.

Tem como fazer isso no CSS?

4
  • <+><><+> . <><+><> . <+><><+> ??
    – Edilson
    Commented 8/04/2017 às 16:15
  • Sim @edilson, cor sim, cor não, cor sim, cor não Commented 8/04/2017 às 16:16
  • Mas ao invés de fazer nas linhas, preciso fazer nas colunas. Commented 8/04/2017 às 16:17
  • na verdade eu escrevi isso no formato coluna, mas apareceu em linha.
    – Edilson
    Commented 8/04/2017 às 16:17

2 Respostas 2

5

Assim? Usando o seletor nth-child. Dessa forma, credito que não precise de grandes explicações, se for mesmo isso o que deseja:

	td:nth-child(odd) {
	background-color:#ffffff;
	}
	td:nth-child(even) {
	background-color:#cccccc;
	}
	<table width="200" border="1">
	  <tbody>
		<tr>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>

		  <td>&nbsp;</td>
		</tr>
		<tr>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>

		  <td>&nbsp;</td>
		</tr>
		<tr>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>
		  <td>&nbsp;</td>

		  <td>&nbsp;</td>
		</tr>
	  </tbody>
	</table>

1
  • 1
    Era isso mesmo que eu estava procurando. Commented 9/04/2017 às 2:33
3

Podes fazer usando combinações:

table tr td {
  width: 20px;
  height: 20px;
  border: solid #000 1px;
}

table tr:nth-child(odd) td:nth-child(even) {
  background: #000;
}
table tr:nth-child(even) td:nth-child(odd) {
  background: #000;
}
<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
        <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

CSS ChessBoard

2
  • Ah, dessa forma ficou parecendo um tabuleiro de xadrez, é legal, mas a pergunta tinha a intenção de fazer algo como foi feito na outra resposta. Commented 9/04/2017 às 2:33
  • @WallaceMaxters foi isso que exemplifiquei nos comentários.
    – Edilson
    Commented 9/04/2017 às 6:50

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .