首頁 > web前端 > css教學 > css border-collapse的使用詳解

css border-collapse的使用詳解

黄舟
發布: 2017-06-30 09:25:50
原創
3008 人瀏覽過
  • 名稱:border-collapse
    #分類:表格
    ##簡述:設定行和單元格的邊是否合併
    概述:border-collapse是設定表格的行或之間是否留有距離的樣式,與之間的距離,在表格裡可以透過border="xxx"與cellspacing="xxx"來實現。換句話說,當border-collapse設定為collapse時,表格本身的border與cellspacing屬性便沒有作用了。

  • 語法:

    # 取值:

    separate : 預設值。邊框獨立(標準HTML)

    collapse : 相鄰邊被合併

  • #
    border-collapse : separate | collapse
    登入後複製
例1:

程式碼:

#顯示效果:

    <table 
    width
    ="200" border="1" cellspacing="3" cellpadding="2" style="border-collapse:collapse">
      <tr>
        <td> </td>
        <td> </td>
      </tr>
      <tr>
        <td> </td>
        <td> </td>
      </tr>
    </table>
    登入後複製
#    
例2:

程式碼:

<table width="200" border="1" cellspacing="3" cellpadding="2" style="border-collapse: separate">
  <tr>
    <td> </td>
    <td> </td>
  </tr>
  <tr>
    <td> </td>
    <td> </td>
  </tr>
</table>
登入後複製
顯示效果為:


 # # 
## 



############################################ ####################

以上是css border-collapse的使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章!

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