Question

我有一个html表，我正在使用其他行颜色（白色和灰色）。

我现在添加了一些列，我想显示某些列被组合在一起，所以我将背景色浅绿色。问题是alt行着色看起来很奇怪，因为它没有应用于那些新的绿色列。

有没有人可以想到一个解决方案，我可以将这些列更改为绿色，但仍然会保留替代颜色对这些列的影响？

Answer 1

这样的事情怎么样？

<table border="1">
    <tr class="even">
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td class="special">stuff</td>
        <td class="special">stuff</td>
        <td>stuff</td>        
    </tr>
    <tr class="even">
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td>stuff</td>
        <td class="special">stuff</td>
        <td class="special">stuff</td>
        <td>stuff</td>        
    </tr>
</table>

.odd{
    background-color: gray;   
}

.special{
    background-color: #9999ff;   
}

.odd .special{
    background-color: #7777ff;   
}

http://jsfiddle.net/ycdSr/

只需使交叉点的颜色与两种颜色相似即可。

Answer 2

我认为这是一个操作顺序问题。执行交替颜色，然后对要组合在一起的列进行着色，将这些列的颜色从交替颜色更改为阴影颜色。

Answer 3

您可以使用具有透明度值的深色，而不是浅色，因此您的灰色背景将为黑色，透明度为90％，绿色为深绿色，透明度为80％（现代浏览器或png的rgba值）使用IE6修复旧版浏览器的图片。

这样，绿色列会在其下方显示灰色背景，使灰色行上的绿色略微变绿。

修改：在现代浏览器中进行测试时，您可以使用rgba(0,0,0,0.2)作为灰色值，使用rgba(0,255,0,0.3)作为绿色值。只要看看它的外观和工作原理，你也可以为旧浏览器修复它。

有关rgba的{{3}}的更多信息。

到browser support。

Answer 4

如果你给他们上课，你也应该给班级正确的css属性和价值，比如阿维图斯说

在alt行颜色html表中，我如何为不同的几列着色

4 个答案: