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

Question

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

Sjo*_*erd 32 css html-table border border-collapse

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

这是一个例子:我有一个折叠边框的表.我在一个字段上设置了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>

Run Code Online (Sandbox Code Playgroud)

这显示了两个细胞之间有一条红线.有没有办法获得金线？

Answer 1

nop*_*ole 59

这是一个定义的行为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

小智 5

只需将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>

Run Code Online (Sandbox Code Playgroud)

在win7上测试: Chrome 16,IE 9,FF 9,Safari 5.0.5.

归档时间：	14 年，10 月前
查看次数：	30501 次
最近记录：	6 年，3 月前