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

边界崩溃 | border-collapse (Miscellaneous Level 2) - CSS 中文开发手册 - Break易站

时间:2020-07-04 10:33:57      阅读:78      评论:0      收藏:0      [点我收藏+]

标签:asi   spl   specific   elements   comm   tps   cell   边框   initial   

  • ??CSS 中文开发手册

    边界崩溃 | border-collapse (Miscellaneous Level 2) - CSS 中文开发手册

    border-collapse

    border-collapseCSS属性指定表的边界是否被分离(区块具有彼此不同的边界)或折叠(相邻小区共享边界)。

    /* Keyword values */
    border-collapse: collapse;
    border-collapse: separate;
    
    /* Global values */
    border-collapse: inherit;
    border-collapse: initial;
    border-collapse: unset;

    仅在_separated-分离边界模型中,单元格之间的距离由border-spacing属性定义。

    仅在collapsed-折叠的边界模型中,行为的border-style值和行为类似。insetgrooveoutsetridge

    Initial value

    separate

    应用对象

    table and inline-table elements

    是否可继承

    yes

    媒体

    visual

    计算值

    as specified

    动画类型

    discrete

    规范顺序

    the unique non-ambiguous order defined by the formal grammar

    语法

    该border-collapse属性被指定为单个关键字,可以从下面的列表中选择。

    separate相邻的单元格有不同的边界(分离的边界表格渲染模型)。

    collapse相邻的单元格具有共享边框(折叠边框表格渲染模型)。

    形式语法

    collapse | separate

    实例

    彩色浏览器引擎表

    HTML

    <table class="separate">
    ? <caption><code>border-collapse: separate</code></caption>
    ? <tbody>
    ?   <tr><th>Browser</th> <th>Layout Engine</th></tr>
    ?   <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    ?   <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    ?   <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    ?   <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    ?   <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
    ? </tbody>
    </table>
    <table class="collapse">
    ? <caption><code>border-collapse: collapse</code></caption>
    ? <tbody>
    ?   <tr><th>Browser</th> <th>Layout Engine</th></tr>
    ?   <tr><td class="fx">Firefox</td> <td class="gk">Gecko</td></tr>
    ?   <tr><td class="ed">Edge</td> <td class="tr">EdgeHTML</td></tr>
    ?   <tr><td class="sa">Safari</td> <td class="wk">Webkit</td></tr>
    ?   <tr><td class="ch">Chrome</td> <td class="bk">Blink</td></tr>
    ?   <tr><td class="op">Opera</td> <td class="bk">Blink</td></tr>
    ? </tbody>
    </table>

    CSS

    .collapse {
    ? border-collapse: collapse;
    }
    
    .separate {
    ? border-collapse: separate;
    }
    
    table {
    ? display: inline-table;
    ? margin: 1em;
    ? border: dashed 5px;
    }
    
    table th,
    table td {
    ? border: solid 3px;
    }
    
    .fx { border-color: orange blue; }
    .gk { border-color: black red; }
    .ed { border-color: blue gold; }
    .tr { border-color: aqua; }
    .sa { border-color: silver blue; }
    .wk { border-color: gold blue; }
    .ch { border-color: red yellow green blue; }
    .bk { border-color: navy blue teal aqua; }
    .op { border-color: red; }

    结果

    规范

    Specification

    Status

    Comment

    CSS Level 2 (Revision 1)The definition of ‘border-collapse‘ in that specification.

    Recommendation

    Initial definition

    浏览器兼容性

    Feature

    Chrome

    Edge

    Firefox (Gecko)

    Internet Explorer

    Opera

    Safari

    Basic support

    1.0

    (Yes)

    1.0 (1.7 or earlier)

    5.0

    4.0

    1.2 (125)

    Feature

    Android

    Edge

    Firefox Mobile (Gecko)

    IE Phone

    Opera Mobile

    Safari Mobile

    Basic support

    2.3

    (Yes)

    1.0 (1.9.2)

    7.0

    11

    3.0

  • ??CSS 中文开发手册
    转载请保留页面地址:https://www.breakyizhan.com/css/32383.html

    边界崩溃 | border-collapse (Miscellaneous Level 2) - CSS 中文开发手册 - Break易站

    标签:asi   spl   specific   elements   comm   tps   cell   边框   initial   

    原文地址:https://www.cnblogs.com/breakyizhan/p/13233969.html

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