怎么用CSS屬性border-collapse解決table的邊框問題？這個(gè)問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個(gè)問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

為內(nèi)黃等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計(jì)制作服務(wù)，及內(nèi)黃網(wǎng)站建設(shè)行業(yè)解決方案。主營(yíng)業(yè)務(wù)為做網(wǎng)站、成都網(wǎng)站建設(shè)、內(nèi)黃網(wǎng)站設(shè)計(jì)，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會(huì)得到認(rèn)可，從而選擇與我們長(zhǎng)期合作。這樣，我們也可以走得更遠(yuǎn)！

HTML部分：

<table class="aa">
   <thead>
    <tr>
     <th>序號(hào)</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;}

看，出現(xiàn)的效果是這樣的：

它不符合我們對(duì)表格的認(rèn)識(shí)，怎么會(huì)多出這么多邊框線呢，一般我們只需要外面的邊框和單元格共用的部分，不需要每個(gè)單元格都搞一個(gè)邊框。那怎么去掉這些多余的邊框呢？接下來就是今天的重點(diǎn)，CSS屬性里的border-collapse可以幫助我們?nèi)サ舳嘤嗟倪吙颉?/strong>

首先我們先看一下border-collapse屬性值說明。他有兩個(gè)值，separate是默認(rèn)值，邊框分開，不合并；collapse邊框合并，如果相鄰，則共用一個(gè)邊框，那我們來給剛剛的表格加上這個(gè)屬性看看。

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

圖片：

感謝各位的閱讀！看完上述內(nèi)容，你們對(duì)怎么用CSS屬性border-collapse解決table的邊框問題大概了解了嗎？希望文章內(nèi)容對(duì)大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。