html – How to make a vertically zebra-striped table (switch column colors)?

Question:

I know how to make a horizontally zebra-striped table, that is, each row with alternating colors (the famous color yes and color no).

I wanted to know now how I could by css toggle the colors of the columns: the first column of one color and the second of another, both 'td' and 'th'.

Is there a way to do this in CSS?

Answer:

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>
Scroll to Top