CSS 表格中的单元格边框重叠的border-collapse属性-css教程-PHP中文网

CSS 表格中的单元格边框重叠的border-collapse属性

黄舟

发布： 2017-06-30 09:46:14

原创

4220 人浏览过

语法：border-collapse : separate | collapse

取值：
separate :　默认值。边框独立(标准HTML)
collapse :　相邻边被合并

说明：
设置或检索表格的行和单元格的边是合并在一起还是按照标准的HTML样式分开。
此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 borderCollapse 。

示例：

table { border-collapse: separate; }

登录后复制

应用于：
IE5.0+ currentStyle runtimeStyle style TABLE

例一：没用样式

以下是引用片段：

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>

登录后复制

例二：作用样式

以下是引用片段：

<table width="300" border="1" cellpadding="0" cellspacing="0" bordercolor="#FF0000" style="border-collapse:collapse;">
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
   <tr>
     <td> </td>
     <td> </td>
     <td> </td>
     <td> </td>
   </tr>
</table>

登录后复制

table width=1 就已经把宽度设置为 1 了
我们面临的问题是这样的，每一个 td 边线都是 1px，table 边线也是 1px。那么当两个td相邻的时候，因为每个 td 边线都是1，所以靠进的时候边线的“宽度和”就是 1+1=2。当 td 和 table 相邻时，同样。

collapse :　相邻边被合并

相邻边被合并！以前我说的 1+1=2 就是因为 td 和td之间，td 和table 之间相邻边的问题。默认时相邻边没有合并，所以就是 1+1=2。现在我们使用 border-collapse:collapse把我们合并了，所以宽度还是 1px。也就是出现细线边框了。

cellspacing设置为“0”，显示的结果就是第一个表格的每个单元格之间的距离为0。若将表格边框设为“0”，则单元格的距离就是0了
cellpadding属性用来指定单元格内容与单元格边界之间的空白距离的大小
。此属性的参数值也是数字，表示单元格内容与上下边界之间空白距离的高度所占像素点数以及单元格内容与左右边界之间空白距离的宽度所占的像素点数。

以上是CSS 表格中的单元格边框重叠的border-collapse属性的详细内容。更多信息请关注PHP中文网其他相关文章！