一般我們寫一個表格，就是下面的這種寫法，給表格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中文網其它相關文章！