HTML | DOM Style borderCollapse Property
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"
Property Values:
- separate: This property is used to set separate border of a cell.
- collapse: It is used to collapse adjacent cells and make common border.
- initial: It is used to set border-collapse property to its default value.
- inherit : It is used when border-collapse property inherit from its parent elements.
Return Value: It returns a string value which represent a border of the table.
Example:
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:
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
Please Login to comment...