Question

我的表有像Name = Value这样的列对。为了清晰起见，包含Name的“td”元素的样式为float：right。但这打破了偶数/奇数背景颜色CSS规则。我希望DKID类的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 link

Answer 1

您可能尝试将文字对齐，但float不是正确的设置。

jsFiddle Demo

请改用：

td.DK_name { text-align: right; }

BTW - 您不需要特殊的类来使表的行条纹化。您可以使用CSS :nth-child()伪类。

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

jsFiddle Demo

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

HTML表格行背景颜色与float属性不符合预期

1 个答案: