码迷,mamicode.com
首页 > Web开发 > 详细

关于css中的border-collapse

时间:2015-10-22 12:44:07      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:

这个属性以前并没有怎么接触过,该属性有两种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>
    则显示的结果是:

技术分享

参考地址:

http://www.css88.com/book/css/properties/table/border-collapse.htm


关于css中的border-collapse

标签:

原文地址:http://my.oschina.net/sunshinewyf/blog/520488

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!