1

偶数と奇数の CSS でスタイル設定されたテーブルがあります。td偶数/奇数のCSS コード:

#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td { background-color:#f5f9fa } /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

ここに画像の説明を入力

下の画像のように、複数の偶数/奇数色の行スタイルが必要です。
ここに画像の説明を入力

CSSでこれを行うことはできますか？私はそれをやろうとしていましたが、色が表示されず、偶数/奇数のスタイルになっています.

4

2 に答える 2

2

このフラグメントを使用してください:
HTML の変更:

        <tr>
                <td class="blueh2">1</td>
                <td class="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779; &#1776;&#1785;:&#1780;&#1785;:&#1780;&#1783;</td>
                <td class="blueh2">&#1777;&#1779;&#1785;&#1777;/&#1776;&#1780;/&#1779; &#1777;&#1778;:&#1777;&#1785;:&#1780;&#1776;</td>
                <td class="greenh2">2.5</td>
                <td class="greenh2">2.5</td>
                <td class="purpleh2">6.75MB</td>
                <td class="purpleh2">54.13MB</td>
                <td class="purpleh2">60.87MB</td>
                <td class="purpleh2">60.87MB</td>
            </tr>

CSS の変更:

#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td.greenh2 { background-color:#f00} /* even*/
#table_box tr:nth-child(even) td.blueh2 { background-color:#0f0} /* even*/
#table_box tr:nth-child(even) td.purpleh2 { background-color:#00f} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

th.grey{
color:#7c7c7c!important;
}
th.blueh{
background-color:#174797;
color:#FFF!important;
}
th.blueh2{
background-color:#5492cf;
color:#FFF!important;
padding:3px!important;
}
th.greenh{
background-color:#579f0f;
color:#FFF!important;
}
th.greenh2{
background-color:#a4dd4f;
color:#FFF!important;
padding:3px!important;
}
th.purpleh{
background-color:#8e04ca;
color:#FFF!important;
}
th.purpleh2{
background-color:#d984fd;
color:#FFF!important;
padding:3px!important;
}

目的の出力に合わせてさらに微調整する必要がありますが、一般的な考え方は明らかだと思います。
必要に応じて、HTML コードを変更せずにプレーンな CSS で行うこともできます。

#table_box tr:nth-child(odd) td { background-color:#ffffff } /*odd*/
#table_box tr:nth-child(even) td:nth-child(1) { background-color:#f00} /* even*/
#table_box tr:nth-child(even) td:nth-child(2) { background-color:#0f0} /* even*/
#table_box tr:nth-child(even) td:nth-child(3) { background-color:#00f} /* even*/
#table_box tr:hover td { background-color:#fffbae; } /* hovering */

等

于 2012-12-15T19:32:14.617 に答える
1

<colgroup>タグを見てください。

于 2012-12-15T20:03:51.483 に答える