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

打印页面