CSS中具有边框折叠的表格边框颜色

  • Z时代
  • 2024-01-10
  • 分类：问答

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

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

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

回答：

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

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

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

因此，最上面的红色获胜。

一种替代此方法的方法可能是使用单元格作为颜色，以赢得行的颜色。

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

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

在那之后，

双赢，然后是虚线，虚线，山脊，起点，凹槽，插图

您可以使用2px来赢得金牌，我尝试在Chrome中使用1pxbut double，但它显示为1px

solid并且也将赢得红色。尽管如果您想使用此方法，那么最好使用此技术确保您支持的浏览器的行为相同。

以上是 CSS中具有边框折叠的表格边框颜色 的全部内容， 来源链接： utcz.com/qa/404913.html

回到顶部