How to make a vertically zebrad table (switch column colors)?

Asked

Viewed 3,746 times

4

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

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

You can do this in CSS?

html css html5 css3

  • <+><><+> . <><+><> . <+><><+> ??

  • Yes @Dilson, color yes, color no, color yes, color no

  • But instead of doing it in the rows, I need to do it in the columns.

  • I actually wrote it in column format, but it appeared online.

2 answers

4


So? Using the selector nth-child. In this way, I believe that you do not need great explanations, if that is what you really 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>

  • 1

    That’s what I was looking for.

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

  • Ah, that way it looked like a chessboard, it’s cool, but the question was intended to do something like it was done in the other answer.

  • @Wallacemaxters is what I exemplified in the comments.

Browser other questions tagged html css html5 css3

You are not signed in. Login or sign up in order to post.