Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Set whether the table border should be collapsed into a single border or not with JavaScript?
In this tutorial, let us look at how to set whether the table border should collapse into a single table border or not with JavaScript.
We can use the borderCollapse property in JavaScript to accomplish this. This property controls how table borders are displayed - either as separate borders for each cell or collapsed into a single unified border.
Using the Style borderCollapse Property
The borderCollapse property defines whether the table border should collapse into a single table border or separate into a double table border. The value 'separate' is the default. The borderCollapse is a read-and-write property.
Syntax
object.style.borderCollapse = "separate|collapse|initial|inherit|revert|unset"
The syntax above sets the borderCollapse value to the element's style.
Values
separate ? Each table cell displays its border separately. The border-spacing and empty-cell property can influence this property.
collapse ? All the table cell borders collapse into a single border. The border-spacing and empty-cell property cannot influence this property.
initial ? Sets this property to its default value.
inherit ? Inherits the property from the parent element.
revert ? Reverts the current value to the default value.
unset ? Unsets the property.
Return Value
The return value is a string that represents the
borderCollapseproperty.
Example 1: Toggle Between Collapse and Separate
The program has a table with a separate border by default. Users can change the options and observe the difference. The 'collapse' option sets a single table border, and the 'separate' option sets distinct cell borders.
<html>
<body>
<style>
table,
td {
border: 1px solid #000;
}
</style>
<h2> Setting the border-collapse value using borderCollapse property </h2>
<table id="brdColSepTab">
<tr>
<th>EmpID</th>
<th>EmpName</th>
<th>EmpDept</th>
</tr>
<tr>
<td>001</td>
<td>Amit</td>
<td>IT</td>
</tr>
<tr>
<td>002</td>
<td>John</td>
<td>Finance</td>
</tr>
<tr>
<td>003</td>
<td>David</td>
<td>Marketing</td>
</tr>
</table>
<br>
<br>
<div id="brdColSepBtnWrap">
<input type="radio" name="brdColSepInp" id="brdColSepBtn1"> Collapse </input>
<input type="radio" name="brdColSepInp" id="brdColSepBtn2" checked> Separate </input>
</div>
<script>
var brdColSepTab = document.getElementById("brdColSepTab");
var brdColSepBtn1 = document.getElementById("brdColSepBtn1");
var brdColSepBtn2 = document.getElementById("brdColSepBtn2");
brdColSepBtn1.onclick = function() {
brdColSepTab.style.borderCollapse = "collapse";
};
brdColSepBtn2.onclick = function() {
brdColSepTab.style.borderCollapse = "separate";
};
</script>
</body>
</html>
Example 2: Revert and Unset Values
The program has a table with collapsed borders initially. The radio button demonstrates how the revert value resets the borderCollapse property to its default value.
<html>
<body>
<style>
table,td {
border: 5px solid pink;
}
#brdRevUnstTab {
border-color: blue;
border-collapse: collapse;
}
</style>
<h2>Revert border-collapse value using <i>borderCollapse property</i></h2>
<b id="brdRevUnstOut">Border collapsed</b>
<br><br>
<table id="brdRevUnstTab">
<tr>
<th>EmpID</th>
<th>EmpName</th>
<th>EmpDept</th>
</tr>
<tr>
<td>001</td>
<td>Amit</td>
<td>IT</td>
</tr>
<tr>
<td>002</td>
<td>John</td>
<td>Finance</td>
</tr>
<tr>
<td>003</td>
<td>David</td>
<td>Marketing</td>
</tr>
</table>
<br>
<br>
<div id="brdRevUnstBtnWrap">
<input type="radio" name="brdRevUnstInp" id="brdRevUnstBtn">Revert to Default</input>
</div>
<script>
var brdRevUnstTab = document.getElementById("brdRevUnstTab");
var brdRevUnstBtn = document.getElementById("brdRevUnstBtn");
var brdRevUnstOut = document.getElementById("brdRevUnstOut");
brdRevUnstBtn.onclick = function() {
brdRevUnstTab.style.borderCollapse = "revert";
brdRevUnstOut.innerHTML = "Border reverted to the default value 'separate'";
};
</script>
</body>
</html>
Key Differences
| Value | Border Display | Border Spacing |
|---|---|---|
separate |
Each cell has its own border | Allows spacing between borders |
collapse |
Single unified border | No spacing between borders |
Conclusion
The borderCollapse property provides control over table border appearance. Use "collapse" for clean, unified borders or "separate" for distinct cell borders with optional spacing.
544 Views
