CSS中的表格边框颜色与边框折叠答案

【问题标题】：Table border color in CSS with border collapseCSS中的表格边框颜色与边框折叠
【发布时间】：2011-05-05 00:39:57
【问题描述】：

我想在表格中的某个字段上方放置一行，以表明它是上述值的总和。但是，表格默认已经有边框了。

这里是一个例子：我有一个边框折叠的表格。我将边框底部设置在一个字段上，并将边框顶部设置在它下方的字段上。这两个都指定了相同的边界。使用顶部的 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>

这显示了两个单元格，它们之间有一条红线。有没有办法获得金线？

【问题讨论】：

这与解决冲突有关。 This is a page 解释了它的工作原理以及浏览器如何计算不同的边框。
我相信没有 CSS 解决方案可以解决这个问题，因为边框折叠只是做了它的作用。您可以使用一些解决方法，例如使用 javascript。您的文档中是否包含任何 javascript 库？
我用 jQuery 解决了这个问题，使用类似这样的东西：mail-archive.com/jquery-en@googlegroups.com/msg89877.html

标签： css html-table border border-collapse

【解决方案1】：

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

【讨论】：

是的，但是那个显示了金色和红色边框（Firefox）

【解决方案2】：

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

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

Example here.

【讨论】：

【解决方案3】：

这是border-collapse 的定义行为。 O'Reilly CSS Definitive Guide 3rd Edition 的第 357 页说：

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

如果...来自相同类型的元素，例如两行...然后颜色取自最顶部和最左侧的边框。

所以最上面的那个是红色的。

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

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

比这个“同色规则是”优先级更高的规则

较宽的边界胜过较窄的边界

然后，

双赢实线，然后虚线，点线，脊线，开头，凹槽，插图

您可以使用 2px 的黄金来赢得胜利，我在 Chrome 中尝试使用 1px 但 double，它显示为 1px solid，它也会战胜红色。虽然如果您想使用此方法，那么最好确保您支持的浏览器使用此技术的行为相同。

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

【讨论】：

这确实解决了我的问题。但是，它在 IE7 中不起作用。
我更新了更多规则...是的，这是非常具体的，在所有类型的浏览器中可能并不相同。
非常感谢！我为此苦苦挣扎，不知道发生了什么。 double 技巧效果很好。我正在使用它在悬停时显示 TR 周围的边框。
尽管它已有近四年的历史，但这是一个花花公子的答案。
也许这条规则在完美世界或 Chrome 中有效，但不同的浏览器有不同的优先级规则。在我看来，这真的很可悲。

【解决方案4】：

只需将border-collapse 改为separate 并将border-spacing 设置为零即可。

注意：IE8 仅在指定 !DOCTYPE 时才支持边框间距属性。

<!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，即 9, 法郎 9, Safari 5.0.5。

【讨论】：

OPs 的问题有点奇怪。不确定他是否想要两个边界。我来到这里是因为我想要一张在每个 <tr> 的顶部和底部都有边框的表格，但是边框正在折叠。我尝试了border-collapse: separate，在单元格周围有一些边距，我无法用 CSS 摆脱。这是我失踪的border-spacing: 0。谢谢你的回答。

【解决方案5】：

我知道这是一个老问题，但刚刚遇到这个问题，我就这样解决了

table { 
  border-collapse: collapse;
}

td.first {
  border-bottom: solid red 1px;
}

td.second {
  border-top: solid gold 1px;
  position: relative;
}

tr:not(:first-child) td.second::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: gold;
}

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

【讨论】：