我想在表中的某个字段上面放一行,表明它是上述值的总和。但是,默认情况下,表已具有边框。
这里是一个例子:我有一个表边框折叠。我将边框底部设置在一个字段上,并将边框顶部设置在其下方的字段上。这两者都指定相同的边框。使用顶部的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.
所以最上面的,是红色的,赢了。
覆盖这一点的一种方法可能是使用单元格的颜色赢得行的颜色。
具有比该“相同颜色规则”更高优先级的规则是“
wider border wins over narrower ones
在那之后,
double wins over solid,then dashed,dotted,ridge,outset,groove,inset
你可以使用2px的黄金来赢得胜利,我试图在Chrome使用1px但双,它看起来像1px固体,它将赢得过红色以及。虽然如果你想使用这种方法,那么最好确保你支持的浏览器表现相同使用这种技术。