css去掉table表格外圍邊框

admin發表於2017-12-04
CSS

預設狀態下table有外圍邊框，實際應用可能需要去掉周圍的邊框。

下面通過程式碼例項介紹一下如何實現此效果。

程式碼例項如下:

[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;
  font-size:12px;
  margin:50px;
}
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>div教程</td>
    <td>css教程</td>
    <td>javascript教程</td>
    <td>站長交流</td>
    <td class="lastCol">外語程度</td>
  </tr>
  <tr>
    <td>jquery教程</td>
    <td>談天說地</td>
    <td>貼圖專區</td>
    <td>正規表示式教程</td>
    <td>c#教程</td>
    <td class="lastCol">java教程</td>
  </tr>
  <tr class="lastrow">
    <td>antzone</td>
    <td>webName</td>
    <td>age</td>
    <td>target</td>
    <td>done</td>
    <td class="lastCol">fighting</td>
  </tr>
</table>
</body>
</html>

相關文章