CSS - border-collapse 屬性

CSS border-collapse 屬性決定表格單元格周圍的邊框是合併還是分開。它用於控制表格的外觀。

語法

border-collapse: separate | collapse | initial | inherit;

屬性值

值	描述
collapse	邊框合併成一個單一邊框，相鄰的兩個單元格共享同一個邊框。
separate	邊框分開，每個單元格都有自己獨立的邊框。預設值。
initial	將屬性設定為其預設值。
inherit	從父元素繼承該屬性。

CSS 邊框合併屬性示例

以下示例解釋了具有不同值的border-collapse 屬性。

共享邊框的邊框合併

在處理表格時，如果我們希望表格的各個單元格具有共享邊框，則使用 collapse 值。在以下示例中，collapse 值已用於表格元素。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 2px solid grey;
         padding: 10px;
      }

      #student-details {
         border-collapse: collapse;
      }
   </style>
</head>

<body>

   <h2>
      CSS border-collapse property
   </h2>
   <table id="student-details">
      <tr>
         <th>Student</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>Peter</td>
         <td>Maths</td>
         <td>77</td>
      </tr>
      <tr>
         <td>Ashok</td>
         <td>Physics</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priyanka</td>
         <td>English</td>
         <td>90</td>
      </tr>

   </table>
</body>

</html>

獨立邊框的邊框合併

在處理表格時，如果我們希望表格的各個單元格具有獨立邊框，則使用 separate 值。在以下示例中，separate 值已用於表格元素。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      table,
      td,
      th {
         border: 2px solid grey;
         padding: 10px;
      }

      #student-details {
         border-collapse: separate;
      }
   </style>
</head>

<body>

   <h2>
      CSS border-collapse property
   </h2>
   <table id="student-details">
      <tr>
         <th>Student</th>
         <th>Subject</th>
         <th>Marks</th>
      </tr>
      <tr>
         <td>Peter</td>
         <td>Maths</td>
         <td>77</td>
      </tr>
      <tr>
         <td>Ashok</td>
         <td>Physics</td>
         <td>85</td>
      </tr>
      <tr>
         <td>Priyanka</td>
         <td>English</td>
         <td>90</td>
      </tr>

   </table>
</body>

</html>

支援的瀏覽器

屬性
border-collapse	1.0	5.0	1.0	1.2	4.0

css_properties_reference.htm

列印頁面