关于css中的border-collapse

最新推荐文章于 2022-07-27 21:07:21 发布

weixin_34205826

最新推荐文章于 2022-07-27 21:07:21 发布

阅读量152

点赞数

文章标签： python

原文链接：https://my.oschina.net/sunshinewyf/blog/520488

版权

2019独角兽企业重金招聘Python工程师标准>>>

这个属性以前并没有怎么接触过，该属性有两种1取值:separate 和 collapse
取值的含义具体如下：
separate：边框独立
collapse：相邻边被合并
举例如下：
<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>border-collapse</title>
   <style type="text/css">
        .separate{
           border-collapse: separate;
        }
        .collapse{
           border-collapse: collapse;
        }
   </style>
</head>
<body>
   <table border="1">
         <tr>
             <td>one</td>
             <td>two</td>
             <td>three</td>
         </tr>
   </table></br>
   <table border="1">
         <tr>
            <td>one</td>
            <td>two</td>
            <td>three</td>
         </tr>
   </table>
</body>
</html>
最后效果：

另外表格元素table使用border-radius是不一样的，当表格样式属性border-collapse是collapse时，表格不能正常显示，只有border-collapse属性值为separate时，表格圆角才能正常显示，如将上例的css样式改成如下的时候：
   <style type="text/css">
        .separate{
           border-collapse: separate;border-radius: 5px;
        }
        .collapse{
           border-collapse: collapse;border-radius: 5px;
        }
   </style>
   则显示的结果是：