css如何實現只保留內部邊框

admin發表於2017-02-13
CSS

在實際應用中可能有這樣的需求，那就是隻保留表格的內部邊框，可能這樣的需求不多，既然有這樣的需求，作為程式設計師就要實現這樣的功能，下面分享一段能夠實現此功能的程式碼例項。

程式碼如下:

[HTML] 純文字檢視 複製程式碼
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style type="text/css">
table{ 
  border-collapse:collapse; 
  border:0px solid #999; 
} 
table td{ 
  border-top:0; 
  border-right:1px solid #999; 
  border-bottom:1px solid #999; 
  border-left:0; 
} 
table tr.lastrow td { 
  border-bottom:0; 
} 
table tr td.lastCol{ 
  border-right: 0; 
} 
</style>
</head>
<body>
<table>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
    <td>螞蟻部落五</td>
    <td class="lastCol">螞蟻部落六</td>
  </tr>
  <tr>
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
    <td>螞蟻部落五</td>
    <td class="lastCol">螞蟻部落六</td>
  </tr>
  <tr class="lastrow">
    <td>螞蟻部落一</td>
    <td>螞蟻部落二</td>
    <td>螞蟻部落三</td>
    <td>螞蟻部落四</td>
    <td>螞蟻部落五</td>
    <td class="lastCol">螞蟻部落六</td>
  </tr>
</table>
</body>
</html>

以上程式碼實現了我們的要求，程式碼比較簡單，這裡就不多介紹了，如有任何問題可以跟帖留言。

相關閱讀:

（1）.border-collapse可以參閱CSS border-collapse一章節。

（2）.border可以參閱css border屬性一章節。

相關文章