Open In App

HTML DOM Style borderCollapse Property

Improve
Improve
Like Article
Like
Save
Share
Report

The DOM Style borderCollapse property in HTML is used to set or return whether the border of the table collapsed into a single border or not. 

Syntax:

  • It is used to return the borderCollapse property.
object.style.borderCollapse 
  • It is used to set borderCollapse property.
object.style.borderCollapse = "separate|collapse|initial|inherit" 

Property Values: 

  • separate: This property is used to set a separate border of a cell.
  • collapse: It is used to collapse adjacent cells and make a common border.
  • initial: It is used to set border-collapse property to its default value.
  • inherit: It is used when border-collapse property inherits from its parent elements. 

Return Value: It returns a string value that represents a border of the table. 

Example 1: In this example, we will use borderCollapse property.

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style borderCollapse Property
    </title>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>DOM Style borderCollapse Property</h2>
        <table id="gfg" border="1">
            <tr>
                <th>Student Name</th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
                <td>19</td>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>20</td>
            </tr>
        </table>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>
        <!-- script to collapse border -->
        <script>
            function geeks() {
                document.getElementById("gfg").style.borderCollapse =
                    "collapse";
            }
        </script>
    </center>
</body>
</html>


Output:

 

Example 2: In this example, we will collapse the border by using the property. 

HTML




<!DOCTYPE html>
<html>
<head>
    <title>
        DOM Style borderCollapse Property
    </title>
</head>
<body>
    <center>
        <h1>GeeksforGeeks</h1>
        <h2>DOM Style borderCollapse Property</h2>
        <table id="gfg" border="1"
               style="border-collapse:collapse;">
            <tr>
                <th>Student Name </th>
                <th>Age</th>
            </tr>
            <tr>
                <td>Manas Chhabra</td>
                <td>19</td>
            </tr>
            <tr>
                <td>Hritik Bhatnagar</td>
                <td>20</td>
            </tr>
        </table>
        <br>
        <button type="button" onclick="geeks()">
            Submit
        </button>
        <!-- script to return borderCollapse value -->
        <script>
            function geeks() {
                alert(
                document.getElementById("gfg").style.borderCollapse);
            }
        </script>
    </center>
</body>
</html>


Output:

 

Supported Browsers: The browser supported by DOM Style borderCollapse property are listed below:

  • Google Chrome 1.0
  • Edge 12.0
  • Internet Explorer 5.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.2


Last Updated : 12 Jun, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads