37

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

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

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

4

5 回答 5

67

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

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

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

所以最上面的，也就是红色的，胜出。

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

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

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

更宽的边界战胜了更窄的边界

在那之后，

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

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

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

于 2010-11-04T12:19:23.017 回答
5

只需将边框折叠更改为分隔并将边框间距设置为零。

注意：IE8 仅在指定了 !DOCTYPE 时才支持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。

于 2012-02-09T13:09:15.900 回答
1

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

于 2010-11-04T12:08:42.023 回答
1

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

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>

于 2020-06-19T20:36:11.060 回答
0

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

或在选择器中更改red为。goldtd.first

这里的例子。

于 2010-11-04T12:10:20.040 回答