怎么用CSS屬性border-collapse解決table的邊框問題

怎么用CSS屬性border-collapse解決table的邊框問題？這個問題可能是我們日常學習或工作經常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家帶來的參考內容，讓我們一起來看看吧！

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;}

圖片：

感謝各位的閱讀！看完上述內容，你們對怎么用CSS屬性border-collapse解決table的邊框問題大概了解了嗎？希望文章內容對大家有所幫助。如果想了解更多相關文章內容，歡迎關注億速云行業資訊頻道。