CSS - border-collapse 属性



CSS border-collapse 属性决定表格单元格周围的边框是合并还是分开。它用于控制表格的外观。

语法

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

属性值

描述
collapse 边框合并成一个单一边框,相邻的两个单元格共享同一个边框。
separate 边框分开,每个单元格都有自己独立的边框。默认值。
initial 将属性设置为其默认值。
inherit 从父元素继承该属性。

Explore our latest online courses and learn new skills at your own pace. Enroll and become a certified expert to boost your career.

CSS 边框合并属性示例

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

共享边框的边框合并

在处理表格时,如果我们希望表格的各个单元格具有共享边框,则使用 collapse 值。在以下示例中,collapse 值已用于表格元素。

示例

Open Compiler
<!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 值已用于表格元素。

示例

Open Compiler
<!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>

支持的浏览器

属性 Chrome Edge Firefox Safari Opera
border-collapse 1.0 5.0 1.0 1.2 4.0
css_properties_reference.htm
广告