css - インライン スタイル CSS を使用したテーブルの行の代替色

Question

表の背景色を交互に変えて読みやすくしたいと考えています。少しグーグルで調べた後、必要なコードを見つけました。

tr:nth-child(even) {
    background-color: #000000;
}

私のソリューションの問題は、ヘッドタグにアクセスできず、これをインラインスタイルの CSS で実装したいのですが、うまくいきません。

<tr style="nth-child(even) background-color: #000000;">

アイデア？

Answer 1

私も似たような状況でした。テーブルの直前にスタイル セクションを配置して解決しました。

<style>
    table#some_table_id tr:nth-child(even) { background-color:#dddddd; }
</style>
<table id="some_table_id">
    <!-- table markup removed -->
</table>

最もエレガントなソリューションではありませんが、私にとってはうまくいきます（Google Chrome 29.0.xで）。

Answer 2

styleインライン スタイルは要素ごとであるため、他のすべての要素の属性に適切なスタイルを挿入する必要がありますtr。これらの行をまだ動的に生成しておらず、JavaScript を使用してこれらのスタイルを挿入できない場合は、各tr要素に手動で属性を適用する必要があります。