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

我想在表格中的某个字段上方放置一行，以表明它是上述值的总和。但是，该表默认情况下具有边框。带边框折叠的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>

这显示了两个单元之间有一条红线。有办法获得金线吗？

来源

2010-11-04 Sjoerd

它与冲突解决有关。 [这是一个页面]（http://www.the-art-of-web.com/css/bordercollapse/），它解释了它是如何工作的以及浏览器如何计算不同的边界。 – 2010-11-04 12:09:42

我相信没有CSS解决方案，因为边界崩溃只是做它做的事情。您可以使用一些解决方法，例如使用javascript。您的文档中是否包含任何JavaScript库？ – 2010-11-04 12:12:16

我解决了它使用jQuery，使用这样的事情：http://www.mail-archive.com/[email protected]/msg89877.html – Sjoerd 2010-11-04 15:29:30

这是border-collapse定义的行为。 O'Reilly CSS权威指南第3版第357页说：

如果折叠边框具有相同的样式和宽度，但颜色不同，则...从大多数到最不优选：单元格，行，行组，列，列组，表。

如果...来自相同类型的元素，例如两行...则从最上面和最左面的边界获取颜色。

所以最顶级的，红色的，胜出。

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

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

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

更宽的边界战胜窄的人

，并在此之后，

双胜固体，然后虚线，虚线，脊，出集，沟，插图

可以使用2px的为金为它赢得了过来，和我在Chrome试图用1px但double，它会作为1px solid，它会拉拢红色为好。尽管如果您想使用此方法，那么最好确保使用此技术支持的浏览器具有相同的行为。

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

来源

2010-11-04 12:19:23

这确实解决了我的问题。但是，它在IE7中不起作用。 – Sjoerd 2010-11-04 12:31:05

我更新了更多的规则......是的，这是非常具体的，可能不是在所有类型的浏览器相同。 – 2010-11-04 12:32:24

非常感谢！我一直在努力挣扎，不知道发生了什么。 “双重”技巧效果很好。我使用它在悬停时显示围绕“TR”的边框。 – vaughan 2012-06-01 00:37:44

从您的代码中删除border-collapse: collapse;，而不是为您的表设置cellspacing属性为0。

来源

2010-11-04 12:08:42

这对我不起作用... – 2010-11-04 12:15:11

检查此http ：//jsfiddle.net/CKHwj/。设置border-collapse：分开;而不是 – 2010-11-04 12:22:38

是的，但那一个显示黄金以及红色边框（火狐） – 2010-11-04 12:25:09

只需从您的风格中删除td.first { border-bottom: solid red 1px; }。

或在td.first选择器中将red更改为gold。

Example here。

来源

2010-11-04 12:10:20 Kyle

只要改变边界崩溃分离，并设置边框间距为零。

注意：只有指定了！DOCTYPE，IE8才支持border-spacing属性。

<!DOCTYPE html> 
 
<html> 
 

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

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

 
</html>

测试Win7上具有： 铬16， IE 9， FF 9， Safari浏览器5.0.5。

来源

2012-02-09 13:09:15

OP的问题有点奇怪。不知道他是否想要两个边界。我来到这里是因为我想在每个“”的顶部和底部都有一个边框的表格，但是边框被折叠。我尝试了'border-collapse：separate'，并且在CSS中我无法摆脱的单元格周围存在边距。我错过了'border-spacing：0'。感谢您的回答。 – Gavin 2013-10-04 09:33:39

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

回答

相关问题