ＣＳＳで表の隣同士のセルの色を変えたい

html
1<!DOCTYPE html>
2<html>
3    <head>
4        <meta charset="utf-8">
5        <style>
6           
7          td:nth-child(2n){
8              background-color:red;
9          }
10          td:nth-child(2n+1){
11              background-color:blue;
12          }
13        </style>
14    </head>
15    <body>
16         <h1>九九表</h1>
17         <table border="1">
18            <?php 
19            
20            for($i=1;$i<10;$i++){
21              echo "<tr>";
22            for($j=1;$j<10;$j++){
23            
24            echo "<td>".$i.'*'.$j.'='.$i*$j."</td>";
25            }
26            echo "</tr>";
27            
28        }
29        
30        ?>
31        </table>
32    </body>
33</html>

表を作成して隣り合うセルの色を変えたいのですができません。
理想は一行目　青　赤　青　赤・・・
二行目　赤　青　赤　青・・・
・・・　こんな感じで色を振りたいのです
調べてもjavascript の方法しか出てこなくてｃｓｓで作成したいです。
ご教授よろしくお願いします。

行動規範の内容に同意します

回答4件

ベースのカラーを決め、所定のセルを色替えするのが妥当

CSS
1td{
2  background-Color:blue;
3}
4tr:nth-child(even) td:nth-child(odd),tr:nth-child(odd) td:nth-child(even){
5  background-Color:red;
6}

投稿2020/03/09 07:11

yambejp

総合スコア116724

YutaEvol

2020/03/09 23:23

ありがとうございました解決しました！

行動規範の内容に同意します

CSS
1          tr:nth-child(odd) td:nth-child(odd),
2          tr:nth-child(even) td:nth-child(even) {
3              background-color: blue;
4          }
5
6          tr:nth-child(odd) td:nth-child(even),
7          tr:nth-child(even) td:nth-child(odd) {
8              background-color: red;
9          }

投稿2020/03/09 06:20

x_x

総合スコア13749

YutaEvol

2020/03/09 23:22

ありがとうございました解決いたしました！

行動規範の内容に同意します

ベストアンサー

CSS
1tr:nth-child(2n) > td:nth-child(2n),
2tr:nth-child(2n+1) > td:nth-child(2n+1) {
3    background-color:red;
4}
5tr:nth-child(2n) > td:nth-child(2n+1),
6tr:nth-child(2n+1) > td:nth-child(2n) {
7    background-color:blue;
8}