In order to access this site you need to enable JavaScript!

You are here: Reference > CSS > properties > border-collapse

border-collapse property

Browser support:

Specifies whether the borders of a table are joined in a single border or not.

This property only works for table elements. If you want to use collapsed borders, the cellSpacing attribute must be set to '0px'.

JavaScript page for this property: borderCollapse. You can find other example(s) there.

Possible values:

One of the following values:

collapse

Borders are not drawn between table cell elements.

inherit

Takes the value of this property from the computed style of the parent element.

separate

Default. Separate borders are drawn for all table cell element.

Default: separate.

Example HTML code 1:

This example illustrates the use of the border-collapse property:

<head>
    <style>
        .collapsed {
            border-collapse: collapse;
        }
        .collapsed td {
            border: 1px solid blue;
        }
        .separated {
            border-collapse: separate;
        }
        .separated td {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    Table with collapsed border:
    <table class="collapsed">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
    <br /><br />
    Table with separated border:
    <table class="separated">
        <tr>
            <td>Apple</td>
            <td>13.46</td>
        </tr>
        <tr>
            <td>Pear</td>
            <td>35.21</td>
        </tr>
        <tr>
            <td>Peach</td>
            <td>23.12</td>
        </tr>
    </table>
</body>