1. 首页
  2. css

CSS只有内边框的桌子

你知道,就像一个井字游戏的趾板。前几天我在想怎么做,就像一个人做的那样。我能想到三种方法。一个包含了大量的规则,我凭直觉认为,一个包含了一个废弃的属性,一个非常简单,感觉有点像CSS的把戏。

。在各处添加边框,然后删除以下边框:

  1. 第一行每个单元格的顶部
  2. 最后一行每个单元格的底部
  3. 每行第一个单元格的左侧
  4. 每行最后一个单元格的右侧不推荐使用,因为它是一个已弃用的属性。但是,这就是规则的具体用途。

    您可以用border-color控制颜色,但不能用border-widthborder-style

    可能性#3)使用\”border style:hidden;`<h3

    这对我来说就像是CSS的把戏。

    table {border-collapse: collapse;border-style: hidden;}table td {border: 5px solid black;}

    MDN有一个解释:

    如果表格单元格和边框折叠,隐藏值具有最高优先级:这意味着如果设置了任何其他冲突边框,它将不会显示。

    通过将border-style: hidden;放在表格本身上,这意味着\"隐藏\"在外边缘获胜,但只在外边缘获胜,而不是单元格内部的任何其他边界。


    你能想出其他方法吗?

    CSS只有内边框的桌子 为WP2原创文章,链接:https://www.wp2.cn/css/css%e5%8f%aa%e6%9c%89%e5%86%85%e8%be%b9%e6%a1%86%e7%9a%84%e6%a1%8c%e5%ad%90/

    发表评论

    您的电子邮箱地址不会被公开。