如何使用 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日

408 次瀏覽

開啟你的 職業生涯

透過完成課程獲得認證

立即開始
廣告

© . All rights reserved.