首页   技术笔记   网址导航   Json在线解析   二维码   Ip地址查询   在线流程图  
新用户注册 | 会员登录
当前位置:  开发笔记 > 前端 > 正文

围绕表中特定行的边框？

作者：个性2402852463 | 2023-08-29 08:53
如何解决《围绕表中特定行的边框？》经验，为你挑选了4个好方法。

我正在尝试设计一些HTML/CSS,它可以在表格中的特定行周围放置边框.是的,我知道我不是真的应该使用表格进行布局,但我不知道足够的CSS来完全替换它.

无论如何,我有一个包含多行和多列的表,有些与rowspan和colspan合并,我想在表的各个部分周围放一个简单的边框.目前,我正在使用4个单独的CSS类(顶部,底部,左侧,右侧),我分别附加到表的顶部,底部,左侧和右侧的单元格.

.top {
  border-top: thin solid;
  border-color: black;
}

.bottom {
  border-bottom: thin solid;
  border-color: black;
}

.left {
  border-left: thin solid;
  border-color: black;
}

.right {
  border-right: thin solid;
  border-color: black;
}




  

    

      no border
      no border here either
    

    

      one
      two
    

    

      three
      four
    

    

      once again no borders
    

    

      hello
    

    

      world

有没有更简单的方法来做我想要的？我尝试将顶部和底部应用于a 但它不起作用.(ps我是CSS的新手,所以我可能错过了一个非常基本的解决方案.)

注意:我需要有多个有边框的部分.基本思想是拥有多个边界集群,每个集群包含多行.



1> enigment..：

怎么样tr {outline: thin solid black;}？适用于tr或tbody元素,并且似乎与大多数浏览器兼容,包括IE 8+,但之前没有.

明白了,我也需要它.在你自己的tbody中包含你想要一个边框的行集,上面的css将在它们的集合周围创建一个边框 - 即顶行的顶部边框,底部行的底部边框,左边并在tbody中的所有行上右边界.边界实际上并没有"在"那些行上,它们位于tbody本身的轮廓上,只是试图描述效果.

2> Kyle Cronin..：

谢谢所有回复的人!我已经尝试了这里提出的所有解决方案,并且我已经在互联网上搜索了更多其他可能的解决方案,我想我找到了一个有前途的解决方案:

tr.top td {
  border-top: thin solid black;
}

tr.bottom td {
  border-bottom: thin solid black;
}

tr.row td:first-child {
  border-left: thin solid black;
}

tr.row td:last-child {
  border-right: thin solid black;
}







  

    

      no border
      no border here either
    

    

      one
      two
    

    

      three
      four
    

    

      once again no borders
    

    

      hello
    

    

      world


3> Sunrise..：

如果您将border-collapse样式设置collapse为父表,您应该能够设置样式tr:(样式是内联的演示)


  

    No Border
  

  

    Border
  

  

    No Border

输出:

HTML输出



4> Simon East..：

我也只是在玩这个,这对我来说似乎是最好的选择:

请注意,这将阻止使用流体/自动列宽,因为单元格将不再与其他行中的对齐,但边框/颜色格式仍然可以正常工作.解决方案是给TR和TD指定一个宽度(px或%).

当然,tr.myClass如果您只想将它​​应用于某些行,您可以创建选择器.display: table然而,显然不适用于IE 6/7,但可能还有其他黑客(hasLayout？)可能适用于那些.:-(

此解决方案不正确:"display:table"将整行放入一个表格单元格中 - 相对于表格的其他行,您将丢失格式.我在Firefox和Chromium中试过这个.
推荐阅读
devbox
个性2402852463
这个屌丝很懒，什么也没留下！
关注作者
Tags | 热门标签
RankList | 热门文章
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有