代码之家 › 专栏 › 技术社区 › Sjoerd

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

border html-table css

Sjoerd · 技术社区 · 15 年前

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

下面是一个例子:我有一个折叠了边框的表。我在一个字段上设置了边框底部,在它下面的字段上设置了边框顶部。这两个都指定了相同的边框。顶部的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 回复 | 直到 8 年前

nonopolarity 15 年前

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

如果折叠边框的样式和宽度相同,但颜色不同,则…从“最多”到“最少”首选:单元格、行、行组、列、列组、表。

如果…来自同一类型的元素,例如两行…然后从最上面和最左边的边框中提取颜色。

所以最上面的,红色,就赢了。

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

例子: http://jsfiddle.net/Chapm/

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

边界越宽,越窄。

之后,

双胜实心,然后是虚线,虚线,脊线,起点,凹槽,插入

你可以用2px来赢得金牌,我试着用chrome 1px 但是 double ,它看起来像 1px solid 它也将战胜红色。尽管您希望使用此方法,但最好使用此技术确保支持的浏览器的行为相同。

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

Sanchit Patiyal 8 年前

只需将border collapse更改为separate,并将border spacing设置为零。

注意:IE8仅在a时支持border spacing属性!已指定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, ie 9, FF 9, 游猎5.0.5.