怎么用CSS屬性border-collapse解決table的邊框問(wèn)題

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

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è)邊框。那怎么去掉這些多余的邊框呢？接下來(lái)就是今天的重點(diǎn)，CSS屬性里的border-collapse可以幫助我們?nèi)サ舳嘤嗟倪吙颉?/strong>

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

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

圖片：

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