border-collapse

优质

小牛编辑

122浏览

2023-12-01

描述 (Description)

border-collapse确定在表的呈现中使用的边界模型。

可能的值 (Possible Values)

collapse - 边框折叠成一个边框。两个相邻的单元将共享边界。
separate - 边界是分开的。每个单元格都有自己的边框，这些边框都不与表中的其他单元格共享。

适用于 (Applies to)

显示表或内联表的元素。

DOM语法 (DOM Syntax)

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

例子 (Example)

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

<html>
   <head>
      <style type = "text/css">
         table.one {border-collapse:collapse;}
         table.two {border-collapse:separate;}
         td.a {
            border-style:dotted; 
            border-width:3px; 
            border-color:#000000; 
            padding: 10px;
         }
         td.b {
            border-style:solid; 
            border-width:3px; 
            border-color:#333333; 
            padding:10px;
         }
      </style>
   </head>
   <body>
      <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>
      <br />
      <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>
   </body>
</html>

这将产生以下结果 -