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

說明

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

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

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

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

 

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

 

CSS代碼

<span style="color: #800000;"><style>
<!--
table</span>{<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;">300px</span>;<span style="color: #ff0000;">     border-collapse</span>:<span style="color: #0000ff;">collapse</span>;<span style="color: #ff0000;">     overflow</span>:<span style="color: #0000ff;">hidden</span>;}<span style="color: #800000;"> tr</span>{<span style="color: #ff0000;"> white-space</span>:<span style="color: #0000ff;">0</span>;}<span style="color: #800000;"> td</span>{<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;">30px</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;">#333333 solid 1px</span>;}<span style="color: #800000;">
-->
<style></span>

html:

<span style="color: #0000ff;"><</span><span style="color: #800000;">table </span><span style="color: #ff0000;">border</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellspacing</span><span style="color: #0000ff;">="0"</span><span style="color: #ff0000;"> cellpadding</span><span style="color: #0000ff;">="0"</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"><</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>index<span style="color: #0000ff;"></</span><span style="color: #800000;">td</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tr</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">tbody</span><span style="color: #0000ff;">></span>
<span style="color: #0000ff;"></</span><span style="color: #800000;">table</span><span style="color: #0000ff;">></span>

參考閱讀：

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

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