如何用CSS屬性border-collapse解決table的邊框問題

當我們在進行頁面佈局時，除了圖片，文字之外，用的最多的就是table表格了，對於很多人來說，table的邊框還是比較煩人的，我個人最討厭看到帶多層邊線的表格，奇醜無比，那你知道怎麼設定表格的邊框嗎？今天就跟大家說說CSS中的border-collapse屬性，這個屬性非常的實用，但很多人還不知道，快過來看看吧。

一般我們寫一個表格，就是下面的這種寫法，給表格border，還有你想要的樣式，程式碼如下：

HTML部分：

<table class="aa">
   <thead>
    <tr>
     <th>序号</th>
     <th>姓名</th>
     <th>性别</th>
     <th>年龄</th>
    </tr>
   </thead>
   <tbody>
    <tr>
     <td>1</td>
     <td>张晗</td>
     <td>男</td>
     <td>23</td>
    </tr>
    <tr>
     <td>2</td>
     <td>陆颖</td>
     <td>女</td>
     <td>20</td>
    </tr>
    <tr>
     <td>3</td>
     <td>郝婷婷</td>
     <td>女</td>
     <td>19</td>
    </tr>
   </tbody>
  </table>

CSS部分：

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}
.aa th,.aa td{border: 1px solid #ccc;padding: 10px;}

 看，出現的效果是這樣的：

它不符合我們對表格的認識，怎麼會多出這麼多邊框線呢，一般我們只需要外面的邊框和單元格共用的部分，不需要每個單元格都搞一個邊框。那要怎麼去掉這些多餘的邊框呢？接下來就是今天的重點，CSS屬性裡的border-collapse可以幫助我們去掉多餘的邊框。

首先我們先來看看border-collapse屬性值說明。他有兩個值，separate是預設值，邊框分開，不合併；collapse邊框合併，如果相鄰，則共用一個邊框，那我們來給剛剛的表格加上這個屬性看看。

.aa{border: 1px solid #ccc;width:30%;text-align: center;border-collapse: collapse;}

圖片：

#

看到了嗎？當我們給表格運用border-collapse: collapse時，表格邊框合併了，變得美觀了很多。在以後的工作中可以使用這個屬性，很好用。建議朋友們自己試試，尤其是初學者，希望這篇文章可以幫助你！

以上是如何用CSS屬性border-collapse解決table的邊框問題的詳細內容。更多資訊請關注PHP中文網其他相關文章！