0

私のテーブルには、Name = Value のような列のペアがあります。視覚的にわかりやすくするために、Name を含む「td」要素は float:right としてスタイル設定されています。しかし、これは偶数/奇数の背景色の CSS ルールに違反しています。クラスDK_nameのtdを、別のCSSルールで定義された背景色で完全に塗りつぶしたい...

これを修正する方法はありますか？

前もって感謝します...

CSS:

table{font-family:"Lucida Console",Monaco,monospace;font-size:0.85em;border-collapse:collapse;}
td.DK_name {float:right;}
tr.DK_even td{background-color:#DDDDDD;color:black;}
tr.DK_odds td{background-color:#FFFFFF;color:black;}

HTML:

<table border='0' cellpadding='7' cellspacing='1'>
    <tr class='DK_even'><td class='DK_name'>name_00_blah =</td><td>123.4</td><td class='DK_name'>name_01 =</td><td>123.7</td></tr>
    <tr class='DK_odds'><td class='DK_name'>name_10 =</td><td>123.5</td><td class='DK_name'>name_11_blah_blah =</td><td>123.8</td></tr>
    <tr class='DK_even'><td class='DK_name'>name_20_blah_blah =</td><td>123.6</td><td class='DK_name'>name_21_blah =</td><td>123.9</td></tr>
</table>

JsFiddle リンク

4

1 に答える 1

1

おそらくテキストを右揃えにしようとしていたのでしょうが、これfloatは正しい設定ではありません。

jsFiddle デモ

代わりにこれを使用してください：

td.DK_name { text-align: right; }

ところで-テーブルの行をストライプ化するために特別なクラスは必要ありません。これには CSS:nth-child()疑似クラスを使用できます。

tr:nth-child(odd) td{background-color:#DDDDDD;color:black;}
tr:nth-child(even) td{background-color:#FFFFFF;color:black;}

jsFiddle デモ

<table border='0' cellpadding='7' cellspacing='1'>
    <tr><td class='DK_name'>name_00_blah =</td><td>123.4</td><td class='DK_name'>name_01 =</td><td>123.7</td></tr>
    <tr><td class='DK_name'>name_10 =</td><td>123.5</td><td class='DK_name'>name_11_blah_blah =</td><td>123.8</td></tr>
    <tr><td class='DK_name'>name_20_blah_blah =</td><td>123.6</td><td class='DK_name'>name_21_blah =</td><td>123.9</td></tr>
</table>
于 2013-09-16T11:51:13.820 に答える