How to make a vertically zebrated table (toggle column colors)?

4

I know how to make a horizontally zebrated table, ie each row with alternating colors (the famous color yes and no color).

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

Can you do this in CSS?

    
asked by anonymous 08.04.2017 / 17:56

2 answers

4
So? Using the nth-child selector. That way, I believe you do not need big explanations, if that's what you want:

	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>
    
08.04.2017 / 18:31
3

You can do it using combinations:

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 >

    
08.04.2017 / 19:07