怎么样定义表格的细边框
怎么样定义表格的细边框
http://hi.baidu.com/caocao808/blog/item/6e3260da23f364dfb7fd4857.html
以前我们制作表格的细边框都是:
（1）插入一个两行两列的表格，设置单元格填充为0，单元格间距为1，表格边框为0；
（2）选中表格，设置背景颜色为黑色；
（3）选中所有单元格，在属性栏中设置背景颜色为白色；
按下F12预览下我们看见的就成细边框了,但如果现在我们用CSS来定义的话，一个属性就搞定了，且看下面的代码:
<table width="500" BORDER="1" BorderColor="#6699CC" CELLSPACING="0" CELLPADDING="3" style="border-collapse:collapse">
<tr>
<td>1313131</td>
<td>1313131</td>
<td>1313131</td>
<td>1313131</td>
</tr>
<tr>
<td>1313131</td>
<td>1313131</td>
<td>1313131</td>
<td>1313131</td>
</tr>
<tr>
<td>1313131</td>
<td>1313131</td>
<td>1313131</td>
<td>1313131</td>
</tr>
<tr>
<td>1313131</td>
</tr>
</table>
大家复制下来自己试试.是不是达到了细边框的效果，其中就是运用了style="border-collapse:collapse"这样一个CSS语句,呵呵，很有用吧!!!
以下是对这个属性的分析:
border-collapse版本：CSS2 兼容性：IE5+ 继承性：无
语法：
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。也就是出现细线边框了。