zoukankan      html  css  js  c++  java
  • 边界崩溃 | border-collapse (Miscellaneous Level 2)

  •   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
  • 相关阅读:
    Spring-Boot:多种配置注入方式
    Spring-Boot:Profile简单示例
    Spring-Boot:拦截器注解范例
    Docker:镜像的迁移
    YARN的内存和CPU配置
    Spark On YARN内存分配
    Spark配置参数
    linux_密钥
    分布式架构高可用架构篇_04_Keepalived+Nginx实现高可用Web负载均衡
    PythonDay01
  • 原文地址:https://www.cnblogs.com/breakyizhan/p/13233969.html
Copyright © 2011-2022 走看看