HTML - DOM Style Object borderCollapse Property

HTML DOM Style Object borderCollapse property specifies whether table cell elements should have separate borders or share a single border that is collapsed into a single border.

Syntax

Given below are the syntax to get or set the borderCollapse property.

Set the borderCollapse property:

object.style.borderCollapse= "separate | collapse | initial | inherit" ;

Get the borderCollapse property:

object.style.borderCollapse;

Property Values

Value	Description
separate	It specifies table cell elements will have separate borders. It is the default value.
collapse	It specifies table cell elements will have single border or collapsed into one border.
initial	It is used to set this property to it's default value.
inherit	It is used to inherit the property of it's parent element.

Return Value

It returns a string value which represents border of table.

Example of HTML DOM Style Object 'borderCollapse' Property

The following example sets border collapse and separate property values.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Style Object borderCollapse Property
    </title>
    <style>
        table {
            border: aqua 2px solid;
        }
    </style>
</head>
<body>
    <p>
        Click to collapse or separate table Border.
    </p>
    <button onclick="fun()">Collapse</button>
    <button onclick="funtwo()">Separate</button>
    <br><br><br><br>
    <table id="border" border="1">
        <tr>
            <td>This is</td>
            <td>is</td>
        </tr>
        <tr>
            <td>an example</td>
            <td>table</td>
        </tr>
        <tr>
            <td>for</td>
            <td>collapse</td>
        </tr>
    </table>
    <script>
        function fun() {
            document.getElementById("border")
                .style.borderCollapse = "collapse";
        }
        function funtwo() {
            document.getElementById("border")
                .style.borderCollapse = "separate";
        }
    </script>
</body>
</html>

Supported Browsers

Property
borderCollapse	Yes 1	Yes 12	Yes 1	Yes 1.2	Yes 4

html_dom.htm

Print Page