CSS屬性 table 的 border-collapse 邊框合並

說明

該CSS屬性用來設定表格的行和列的邊框是合並成單邊框，還是分別有各自的邊框

separate 缺省值。邊框分開，不合並。
collapse 邊框合並。即如果相鄰，則共用同一個邊框。

雖然在DIV+CSS 時代 table 的權重越來越低，但是有時候，還是局部地方table 還是挺好用的

特別是制表方面，還是table 比較的方便。
當然，制表肯定少不了邊框，但是如果你直接在td上加邊框，就會出現一種情況，table 的外圍一周是單線，里面都是雙線。

 

你也可以通過其他分開設置的方法實現全部單線，但是這兒有一個最最簡單的方法，CSS 里提供了 border-collapse 屬性可以控制相連邊框的合並還是分離

 

CSS代碼

<style>
<!--
table{ width:300px;     border-collapse:collapse;     overflow:hidden;} tr{ white-space:0;} td{ height:30px; border:#333333 solid 1px;}
-->
<style>

html:

<table border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
<tr>
<td>index</td>
<td>index</td>
<td>index</td>
</tr>
</tbody>
</table>

參考閱讀：

http://www.manongjc.com/article/1211.html

http://www.manongjc.com/article/1212.html