Question

我想在表格的某个字段上方加一条线，表示它是上述值的总和。但是，默认情况下，表格已经有边框。

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

这显示两个单元格之间有红线。有没有办法获得金线？

Answer 1

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

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

if ...来自相同类型的元素，例如两行......然后从最顶部和最左边的边界获取颜色。

所以最重要的是红色，胜出。

重写此方法的一种方法可能是使用颜色单元格来赢取行的颜色。

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

优先级高于此“相同颜色规则”的规则

更广泛的边界胜过更狭窄的边界

之后，

双赢胜过实心，然后是虚线，点缀，脊，开始，凹槽，插入

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

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

Answer 2

只需将border-collapse更改为单独并将border-spacing设置为零。

注意：仅当指定了！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上测试： Chrome 16， IE 9， FF 9， Safari 5.0.5。

Answer 3

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

Answer 4

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

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

Example here

Answer 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>

CSS中的表边框颜色与边框折叠

5 个答案: