mozilla
Your Search Results

    border-collapse

    Summary

    The border-collapse CSS property selects a table's border model. This has a big influence on the look and style of the table cells.

    The separated model is the traditional HTML table border model. Adjacent cells each have their own distinct borders. The distance between them given by the border-spacing property.

    In the collapsed border model, adjacent table cells share borders. In that model, the border-style value of inset behaves like groove, and outset behaves like ridge.

    • Initial value separate
    • Applies to table and inline-table elements
    • Inherited yes
    • Media visual
    • Computed value as specified
    • Animatable no
    • Canonical order the unique non-ambiguous order defined by the formal grammar

    Syntax

    Formal syntax: collapse | separate
    
    border-collapse: collapse
    border-collapse: separate
    
    border-collapse: inherit

    Values

    separate
    Is a keyword requesting the use of the separated-border table rendering model. It is the default value.
    collapse
    Is a keyword requesting the use of the collapsed-border table rendering model.

    Examples

    View a standalone example

    View Live Examples

    A colorful table of browser engines

    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="ie">Internet Explorer</td> <td class="tr">Trident</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="ie">Internet Explorer</td> <td class="tr">Trident</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; }

    Result

    Specifications

    Specification Status Comment
    CSS Level 2 (Revision 1) Recommendation  

    Browser compatibility

    Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
    Basic support 1.0 1.0 (1.7 or earlier) 5.0 4.0 1.2 (125)
    Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
    Basic support 2.3 1.0 (1.9.2) 7.0 11 3.0

    See also

    Document Tags and Contributors

    Last updated by: teoli,
    Hide Sidebar