テーブルテーブルはnth-child()を使用して、交互の色の変更と配置を実現します。

コアコード

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <meta http-equiv="X-UA-compatible" content="ie=edge">
    <title>テーブル2n</title>
</head>

<本文>
    <スタイル>
        テーブル {
            マージン: 30px 自動;
            境界線: #aaa 4px ダブル;
            境界線の折りたたみ: 分離;
            境界線の間隔: 0px;
        }
        td、th {
            パディング: 5px;
            幅: 50px;
            境界線の色: #ddd;
            境界線の幅: 1px;
            境界線のスタイル: solid;
        }
        tr:n番目の子(偶数){
            背景: #eee;
        }
    </スタイル>
    <テーブル>
        <tr><th>月</th><th>財務管理</th><th>給与</th> <th>原稿料</th><th>総収入</th><th>生活費</th><th>買い物</th><th>電話代</th><th>交通費</th><th>総支出</th></tr>
        <tr><td>1月</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr>
        <tr><td>2月</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr>
        <tr><td>3月</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr>
        <tr><td>4月</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr><tr>
        <td>5月</td><td>100</td><td>200</td><td>400</td><td>700</td><td>200</td><td>500</td><td>100</td><td>200</td><td>1000</td></tr>
        <tr><td>6月</td><td>300</td><td>400</td><td>100</td><td>800</td><td>50</td><td>70</td><td>200</td><td>30</td><td>350</td></tr>
        <tr><td>7月</td><td>20</td><td>1000</td><td>200</td><td>1220</td><td>130</td><td>92</td><td>20</td><td>43</td><td>285</td></tr>
        <tr><td>8月</td><td>125</td><td>72</td><td>128</td><td>325</td><td>42</td><td>13</td><td>20</td><td>200</td><td>275</td></tr>
    </テーブル>
</本文>
</html>

レンダリング

上記の例では、交互の線の色のみが設定されているため、間違った行を読み取ることは防止されますが、同じ行のデータは依然として混乱を招きます。
このとき、CSS:nth-child() 子セレクターを使用してさまざまなスタイルを追加し、列ごとに異なる表示効果を設定できます。

        tr>td:n番目の子(-n+5) {
            色: 緑;
            テキスト配置: 右;
        }
        tr>td:n番目の子(n+6) {
            色: 赤;
            テキスト配置: 右;
        }
        tr>td:n番目の子(1) {
            フォントの太さ: 太字;
            色: 黒;
            テキスト配置: 中央;
        }
        tr>td:n番目の子(5),tr>td:n番目の子(10) {
            フォントの太さ: 太字;
        }

レンダリング

スタイルを追加すると、月を太字で表示し、赤は経費、緑は収入などを表すなど、データの解釈やカテゴリの区別が容易になります。

CSS の導入によれば、:nth-child(n) セレクターは、要素の種類に関係なく、親要素の N 番目の子要素と一致し、n は数値、キーワード、または数式になります。
注意すべき点は、最初の子要素は 0 からではなく 1 から始まることです。たとえば、最初の月列のスタイルは上記に設定されており、:nth-child パラメータは 1 です。

 tr>td:n番目の子(1) {
            …
        }

それぞれ奇数と偶数を表す定数 odd と even を使用することもできます。例えば、交互の行の背景色は次のように設定されます。

tr:n番目の子(偶数){
            背景: #eee;
        }

数式を使用して、連続選択またはオフセット選択を実現できます。サイクルの長さは式 (an + b) を使用して表されます。ここで、n はカウンター (0 から開始)、b はオフセット値です。
以下の設定はevenを使用する場合と同等です。

tr:n番目の子(2n){
            背景: #eee;
        }

2n+1は奇数と同じ効果を持つ

tr:n番目の子(奇数){
            背景: #eee;
        }

2n+1

tr:n番目の子(2n+1){
            背景: #eee;
        }

単に n+b を使用すると、連続選択を表します。

tr>td:n番目の子(-n+5) {
            …
        }

-n+b は高度な使用法で、最初から選択しますが、n+b は最後から選択します。
なぜ -n なのですか?実際、式 -n + 5 ≥ 0 から、n ≤ 5、つまり 1 ～ 5 であることが推測できます。

以下は補足です

CSS3: nth-child() 疑似クラスセレクター、テーブル奇数行と偶数行の定義スタイル

CSS3 の威力は驚異的です。人々は驚きながらも、その困難な道のりを残念に思わざるを得ません。優れた標準は、業界のブラウザーによって十分にサポートされている場合にのみ「標準」と見なされます。 CSS3 標準は数年前から提案されていますが、それを実装できるブラウザは多くありません。一部のブラウザでは一部の仕様を実装できますが、その用途は何でしょうか?さらなる互換性の問題に直面して、CSS 開発者は絶望のため息をつくしかありません。それでも、前向きな人間として、どうして私たちは前進を止めることができるでしょうか？今日は、CSS3 疑似クラスセレクター「:nth-child()」の「プレビュー」を紹介します。
表の奇数行と偶数行の定義スタイル:

文法：

:n番目の子(an+b)

なぜ彼女を選んだのか？それは、このセレクターが最も知識が豊富だと思うからです。残念ながら、私のテストによると、これを適切にサポートできるブラウザは Opera 9+ と Safari 3+ だけです。

説明する：

擬似クラス: nth-child() のパラメータは an+b です。w3.org の説明に従って中国語で書くと、混乱してしまうかもしれません。また、著者の文章力には限界があるため、an+b ステートメントを避け、5 つの方法で 5 つの部分に分割して説明することにしました。

最初の方法：シンプルなデジタルシリアル番号の書き込み

:n番目の子(番号)

数値番目の要素に直接一致します。数値パラメータは 0 より大きい整数である必要があります。

例：

li:nth-child(3){background:orange;}/*3番目のLIの背景をオレンジ色にする*/

2番目の方法: 複数書き込み

:n番目の子(an)

a の倍数であるすべての要素に一致します。パラメータ an 内の文字 n は省略できません。これは 3n や 5n のように複数表記を表す記号です。

例：

li:nth-child(3n){background:orange;}/*3番目、6番目、9番目、…、および3の倍数であるすべてのLIの背景をオレンジ色に設定します*/

3番目のタイプ: 複数グループマッチング

:nth-child(an+b) と :nth-child(an-b)

まず、要素をグループ化します。各グループには a 個の要素があります。b はグループ内のメンバーのシリアル番号です。文字 n とプラス記号 + は省略できず、位置を入れ替えることもできません。これがこの記述方法の特徴です。a と b は両方とも正の整数または 0 です。 3n+1、5n+1など。ただし、プラス記号はマイナス記号に変更することができ、その場合にはグループ内の ab 番目の項目と一致します。 (実際、 an の前にはマイナス記号が付くこともありますが、それは次のセクションで説明します。)

例：

li:nth-child(3n+1){background:orange;}/*3つのグループごとに、最初、4番目、7番目、...、最初のLIを一致させます*/
li:nth-child(3n+5){background:orange;}/*5番目から始まる3つのグループごとに5番目、8番目、11番目、...、および最初のLIを一致させます*/
li:nth-child(5n-1){background:orange;}/*5th-1=4、10th-1=9、...、5の倍数から1を引いたLIに一致*/
li:nth-child(3n±0){background:orange;}/*(3n)と同等*/
li:nth-child(±0n+3){background:orange;}/*(3)と同等*/

4番目: 逆複数グループマッチング

:n番目の子(-an+b)

ここで、1 つの負の値と 1 つの正の値のいずれかを省略することはできません。省略すると意味がなくなります。これは :nth-child(an+1) に似ており、どちらも最初のものに一致しますが、違いは、b 番目から始めて逆方向にカウントするため、最大で b 個を超える子には一致しないという点です。

例：

li:nth-child(-3n+8){background:orange;}/*8番目、5番目、2番目のLIに一致します*/
li:nth-child(-1n+8){background:orange;}/* または (-n+8) は、最初の 8 個 (8 番目を含む) の LI に一致します。これはより実用的で、最初の N 個の一致を制限するためによく使用されます。*/

5番目: 奇数と偶数のマッチング

:nth-child(奇数) と :nth-child(偶数)

それぞれ奇数と偶数の要素に一致します。奇数（odd）は（2n+1）と同じ結果になり、偶数（even）は（2n+0）と（2n）と同じ結果になります。

著者の視点：表の奇数行と偶数行のスタイルは次のように記述できます。

.table > tr:nth-child(even) > td {background-color: #ccc;} (偶数行)
.table > tr:nth-child( odd ) > td {background-color: #ccc;} (奇数行)

これで、テーブルで :nth-child() を使用して、行ごとに色を変更して配置する方法についての説明は終わりです。テーブルの nth-child に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

<<: Element UI をインストールして vue3.0 でベクターグラフィックスを使用する方法

>>: ウェブページの右側に固定されたフローティングレイヤーの実装コード