带有边框折叠的CSS中的表边框颜色

前端之家收集整理的这篇文章主要介绍了带有边框折叠的CSS中的表边框颜色前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我想在表中的某个字段上面放一行,表明它是上述值的总和。但是,默认情况下,表已具有边框。

这里是一个例子:我有一个表边框折叠。我将边框底部设置在一个字段上,并将边框顶部设置在其下方的字段上。这两者都指定相同的边框。使用顶部的CSS。有没有办法使用底层的?

<html>
    <head>
        <style type="text/css">
            table { border-collapse: collapse; }
            td.first { border-bottom: solid red 1px; }
            td.second { border-top: solid gold 1px; }
        </style>

    <body>
        <table>
            <tr><td class="first">Hello</td></tr>
            <tr><td class="second">World</td></tr>
        </table>
    </body>
</html>

显示两个单元格之间有红线。有办法获得金线吗?

解决方法

这是边界崩溃的定义行为。 O’Reilly CSS第357页第3版说:

if collapsing borders have the same style and width,but differ in color,then … from most to least preferred: cell,row,row group,column,column group,table.

if … come from same type of element,such as two rows… then color is taken from borders that are the topmost and the leftmost.

所以最上面的,是红色的,赢了。

覆盖这一点的一种方法可能是使用单元格的颜色赢得行的颜色。

例如:http://jsfiddle.net/Chapm/

具有比该“相同颜色规则”更高优先级的规则是“

wider border wins over narrower ones

在那之后,

double wins over solid,then dashed,dotted,ridge,outset,groove,inset

你可以使用2px的黄金来赢得胜利,我试图在Chrome使用1px但双,它看起来像1px固体,它将赢得过红色以及。虽然如果你想使用这种方法,那么最好确保你支持的浏览器表现相同使用这种技术。

http://jsfiddle.net/Chapm/2/

猜你在找的CSS相关文章