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

You are here: Reference > JavaScript > client-side > style handling > properties > borderCollapse

borderCollapse style property

Browser support:

Specifies or returns 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 property must be set to '0px'.

Syntax:

object.borderCollapse;

You can find the related objects in the Supported by objects section below.

This property is read/write.

CSS page for this property: border-collapse

Possible values:

The type of this property is string.

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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the borderCollapse property in JavaScript:

<head>
    <style>
        .example td {
            border: 1px solid blue;
        }
    </style>
</head>
<body>
    <table class="example" id="Table">
        <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>
    <button onclick="Table.style.borderCollapse='separate'">border-collapse: separate</button>
    <button onclick="Table.style.borderCollapse='collapse'">border-collapse: collapse</button>
</body>