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. Let us look into this in brief.

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.

Users can follow the syntax below to use the borderCollapse property.

Syntax

object.style.borderCollapse = "separate|collapse|initial|inherit|revert|unset"

The syntax above sets the borderCollapse value to the item'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 can not influence this property. The border inset style here is groove. The outset style is a ridge.

  • 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 borderCollapse property.

Example 1

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");
      var brdColSepInpStr = "";
      brdColSepBtn1.onclick = function() {
         brdColSepTab.style.borderCollapse = "collapse";
      };
      brdColSepBtn2.onclick = function() {
         brdColSepTab.style.borderCollapse = "separate";
      };
   </script>
</body>
</html>

Example 2

The program has a table with a separate border by default. The radio button sets the border-collapse value to either reset or unset.

The value collapse changes to the value separate when the user selects the reset or unset option. But the reverse value change is not possible with these options.

<html>
<body>
   <style>
      table,td {
         border: 5px solid pink;
      }
      #brdRevUnstTab {
         border-color: blue;
         border-collapse: collapse;
      }
   </style>
   <h2>Revert or unset 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/Unset</input>
   </div>
   <script>
      var brdRevUnstTab = document.getElementById("brdRevUnstTab");
      var brdRevUnstBtnWrap = document.getElementById("brdRevUnstBtnWrap");
      var brdRevUnstInpStr = "";
      var brdRevUnstBtn = document.getElementById("brdRevUnstBtn");
      var brdRevUnstOut = document.getElementById("brdRevUnstOut");
      brdRevUnstBtn.onclick = function() {
         //brdRevUnstBtnWrap.style.display = "none";
         brdRevUnstTab.style.borderCollapse = "revert" || "unset";
         brdRevUnstOut.innerHTML = "Border reset or unset to the default value 'separate'";
      };
   </script>
</body>
</html>

This tutorial taught us the borderCollapse property to separate, collapse, reset or unset the table border. Users can use this property value based on their requirements.

Updated on: 15-Nov-2022

374 Views

Related Articles

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements