實現table細線表格效果程式碼

螞蟻小編發表於2017-02-26
細線表格相對更為美觀，下面就通過程式碼例項介紹一下如何實現此效果。

程式碼如下:

[HTML] 純文字檢視 複製程式碼執行程式碼
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>螞蟻部落</title> 
<style type="text/css">
.table{
  width:300px;
  height:100px;
  border:1px solid #ccc;
  border-collapse:collapse;
}
.table td,.table th {
  border:1px solid #ccc;
  padding:5px;
}
</style>
</head>
<body>
<table class="table">
  <thead>
    <tr>
      <th>螞蟻部落一</th>
      <th>螞蟻部落二</th>
    </tr>
  </thead>
  <tr>
    <td>javascript教程</td>
    <td>jQuery教程</td>
  </tr>
  <tr>
    <td>HTML教程</td>
    <td>div css教程</td>
  </tr>
</table>
</body>
</html>

以上程式碼實現了我們的要求，程式碼非常的簡單，主要是使用瞭如下程式碼:

[CSS] 純文字檢視 複製程式碼
border-collapse:collapse

border-collapse屬性可以參閱CSS border-collapse一章節。 

相關文章