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