HTML DOM Style borderCollapse Property
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 >
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 >
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
Share your thoughts in the comments
Please Login to comment...