如何使用 JavaScript 设置表格边框是否应该合并成单个边框？

在本教程中，我们将了解如何使用 JavaScript 设置表格边框是否应该合并成单个表格边框。

我们可以使用 JavaScript 中的 borderCollapse 属性来实现这一点。让我们简要了解一下。

使用 Style borderCollapse 属性

borderCollapse 属性定义表格边框是否应该合并成单个表格边框，或者分离成双表格边框。值“separate”是默认值。borderCollapse 是一个可读写属性。

用户可以按照以下语法使用 borderCollapse 属性。

语法

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

上述语法将 borderCollapse 值设置为项目的样式。

值

  • separate − 每个表格单元格分别显示其边框。border-spacing 和 empty-cell 属性可以影响此属性。

  • collapse − 所有表格单元格边框合并成单个边框。border-spacing 和 empty-cell 属性无法影响此属性。此处的边框内嵌样式为 groove。外嵌样式为 ridge。

  • initial − 将此属性设置为其默认值。

  • inherit − 从父元素继承该属性。

  • revert − 将当前值恢复为默认值。

  • unset − 取消设置该属性。

返回值

  • 返回值是一个表示 borderCollapse 属性的字符串。

示例 1

该程序有一个默认情况下具有分离边框的表格。用户可以更改选项并观察差异。“collapse”选项设置单个表格边框，“separate”选项设置不同的单元格边框。

<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>

示例 2

该程序有一个默认情况下具有分离边框的表格。单选按钮将 border-collapse 值设置为重置或取消设置。

当用户选择重置或取消设置选项时，值 collapse 更改为值 separate。但是，使用这些选项无法进行反向值更改。

<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>

本教程向我们介绍了 borderCollapse 属性，用于分离、合并、重置或取消设置表格边框。用户可以根据自己的需求使用此属性值。

更新于: 2022-11-15

407 次浏览

开启你的 职业生涯

完成课程获得认证

立即开始
广告