CSS 属性

border-collapse 确定表格渲染中使用的边框模型。

属性值

  • collapse: 边框被折叠制作单一边框。两个相邻的单元格将共享一个边框。

  • separate: 边框是分开的。每个单元格都有自己的边框，并且这些边框都不与表格中的其他单元格共享。

适用范围

显示为表或内联表。

DOM 语法

object.style.borderCollapse = "Any of the two values";

示例

以下是显示这两个值的示例 -

<html>
<head>
<style>
   div {
      padding: 15px;
   }

   table.one {border-collapse:collapse;}
   table.two {border-collapse:separate;}
   
   td.a { 
      border-style:dotted; 
      border-width:3px; 
      border-color:#000000; 
      padding: 10px;
      background-color: aquamarine;
   }
   td.b {
      border-style:solid; 
      border-width:3px; 
      border-color:#333333; 
      padding:10px;
      background-color: thistle;
   }
</style>
</head>
<body>
   <div>
   <table class = "one">
      <caption>Collapse Border Example</caption>
      <tr><td class = "a"> Cell A Collapse Example</td></tr>
      <tr><td class = "b"> Cell B Collapse Example</td></tr>
   </table>
   </div>
   <div>
   <table class = "two">
      <caption>Separate Border Example</caption>
      <tr><td class = "a"> Cell A Separate Example</td></tr>
      <tr><td class = "b"> Cell B Separate Example</td></tr>
   </table>
   </div>
</body>
</html>