Skip to content
Related Articles

Related Articles

HTML | DOM Style borderCollapse Property
  • Difficulty Level : Easy
  • Last Updated : 05 Sep, 2019
GeeksforGeeks - Summer Carnival Banner

The DOM Style borderCollapse property in HTML is used to set or returns 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" 

Return Value: It returns a string value which represent a border of the table.

Example:




<!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:




<!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.2
  • Internet Explorer 4.0
  • Firefox 1.0
  • Opera 4.0
  • Safari 1.0

full-stack-img

My Personal Notes arrow_drop_up
Recommended Articles
Page :