0

My table has column pairs like Name = Value. For visual clarity, the "td" element that contains the Name is styled as float:right. But this breaks the even/odd background-color CSS rule. I want the td with class DK_name to be completely filled with the background-color defined in another CSS rule...

Any idea how to fix this ?

Thanks In Advance...

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 link

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 回答