4

テーブルデータを適切な形式で表示するために次の CSS スタイルを使用していますが、テーブルヘッダー ( th ) の代替背景を別の色で表示したい...

CSSの下のみを変更して同じことを達成するにはどうすればよいですか。つまり、すべてのTH3、TH5の背景は青色にする必要があります(最初のTH1を除く-デフォルトの背景は赤色になります)一方、TH2、TH4、TH6は黄色の背景にする必要があります。

私はすでに n 番目の子セレクターを試しましたが、どこかで th + th 両方の方法が機能していません。

 <style type="text/css">
    table {
           /*...all table attributes like fontsize etc*/
            font-size:11px;
            color:#333333;                
    }
    table th {
            /*...all th attributes like padding etc*/
            background-color:#d4e3e5;
            padding: 8px;
    }
    table td {
            /*...all td attributes like padding etc*/
            padding: 8px;
    }
    </style>

すべての reespons に感謝しますが、n 番目の子セレクターが機能していません。CSS を変更して同じことを達成する基本的な方法はありますか?

4

3 に答える 3

1

フィドル

n番目の子は働いています。

 th:nth-child(odd) {
     background-color:red; // Replace it with your desired color
 }

 th:nth-child(even) {
     background-color: yellow;
 }

さらに問題がある場合は、HTML と CSS を投稿してください。

于 2015-02-19T04:51:52.780 に答える
0

これを試して。

th:nth-child(odd) { 
    background-color:blue; 
}

th:nth-child(even) {
     background-color:yellow; 
}


<!DOCTYPE html>
<html>
<head>
    <style>
        th:nth-child(odd){ background-color:blue; }
        th:nth-child(even){ background-color:yellow; }
    </style>
</head>
<body>
    <table>
        <tr>
            <th>heading</th>
            <th>heading1</th>
        </tr>
        <tr>
            <td>xxx</td>
            <td>yyy</td>
        </tr>
        <tr>
            <td>xxx1</td>
            <td>yyy1</td>
        </tr>
    </table>
</body>
</html>

于 2015-02-19T04:49:09.793 に答える
0

これを試すこともできます

table th:odd {
    background-color:#000; //Replace it with your desired color
}

table th:odd {
    background-color:#f00; //Replace it with your desired color
}

または、n 番目の要素を選択してみてください。

th:nth-child(n) {
    background-color:red; // Replace it with your desired color
}
于 2015-02-19T04:55:47.043 に答える