首頁 > web前端 > css教學 > CSS屬性 table 的 border-collapse 邊框合併

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

高洛峰
發布: 2016-10-09 16:21:19
原創
1171 人瀏覽過

說明

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

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

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

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

 

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

 

<style>
<!--
table{ width:300px;     border-collapse:collapse;     overflow:hidden;} tr{ white-space:0;} td{ height:30px; border:#333333 solid 1px;}-->
<style>
登入後複製
<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

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板