提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > border-collapse属性怎样用【css教程】,border-collapse属性,CSS

border-collapse属性是用于表格元素的, 能够设置表格的两边框合并为一个单一的边框。

CSS border-collapse属性

border-collapse属性设置表格的边框是不是被合并为一个单一的边框,照样像在规范的 HTML 中那样离开显现。

它有两个值:

separate:默认值,边框是离开的;每一个单元格将显现本身的边框

collapse:假如能够,边框齐集并为一个单一的边框(此时,border-spacing 和 empty-cells 属性是无效的)。

申明:一切主流浏览器都支撑 border-collapse属性。

注:border-collapse属性,假如没有指定!DOCTYPE,能够发生意想不到的结果。

CSS border-collapse属性的运用示例:

下面经由过程简朴代码示例来看看border-collapse属性的运用:

<!DOCTYPE html>
<html>
   <head>
     <meta charset="UTF-8">
      <style type = "text/css">
      .box{
      width: 400px;
      margin: 100px auto;
      }
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding:10px 50px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px 50px;
         }
      </style>
   </head>
   <body>
   <div class="box">
      <table class = "one">
         <caption>边框折叠示例</caption>
         <tr><td class = "a">单元格A折叠示例</td></tr>
         <tr><td class = "b">单元格B折叠示例</td></tr>
      </table>
      <br />
      
      <table class = "two">
         <caption>边框分开示例</caption>
         <tr><td class = "a">单元格A分开示例</td></tr>
         <tr><td class = "b">单元格B分开示例</td></tr>
      </table>
    </div>
   </body>
</html>

结果图:

以上就是border-collapse属性怎样用的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

上一篇:

下一篇:

相关推荐

0 条评论关于"border-collapse属性怎样用【css教程】,border-collapse属性,CSS"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线