• 首页
  • css3教程
  • html5教程
  • jQuery手册
  • php7教程
  • MySQL手册
  • apache手册
  • border-collapse

    border-collapse CSS 属性是用来决定表格的边框是分开的还是合并的。在分隔模式下,相邻的单元格都拥有独立的边框。在合并模式下,相邻单元格共享边框。

    • 合并(collapsed)模式下,表格中相邻单元格共享边框。在这种模式下,CSS属性border-style的值inset表现为槽,值outset表现为脊。
    • 分隔(separated)模式是 HTML 表格的传统模式。相邻单元格都拥有不同的边框。边框之间的距离是通过CSS属性border-spacing来确定的。

    示例

    /* keyword values */
    border-collapse: collapse;
    border-collapse: separate;
    
    /* global values */
    border-collapse: inherit;
    border-collapse: initial;
    border-collapse: unset;
    

    浏览器支持

    IE浏览器火狐浏览器opera浏览器chrome浏览器safari浏览器
    浏览器都支持border-collapse

    语法:

    border-collapseseparate| collapse

    取值

    • separate:默认值。每个单元格拥有独立的边框(采用 separated-border 表格渲染模型)。
    • collapse:相邻的单元格共用同一条边框(采用 collapsed-border 表格渲染模型)。

    说明:

    设置或检索表格的行和单元格的边是合并还是独立。

    • 只有当表格边框独立(即border-collapse属性等于separate时),border-spacingempty-cells才起作用。
    • 对应的脚本特性为borderCollapse
    默认值separate
    适用于table系元素
    继承性
    动画性
    计算值指定值

    例子

    //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 6px;
     border-width: 6px;
    }
    table th, table td {
     border: solid 3px;
    }
    .fx { border-color: orange blue; }
    .gk { border-color: black red; }
    .ie { 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; }
    

    上篇:table-layout

    下篇:empty-cells