css table細線表格程式碼

antzone發表於2018-03-06
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{ 
  width:100%; 
  padding:0px; 
  margin:0px; 
  font-family:Arial, Tahoma, Verdana, Sans-Serif,宋體; 
  border-left:1px solid #ADD8E6; 
  border-collapse:collapse; 
} 
/*表頭樣式。*/ 
.table th{ 
  font-size:12px; 
  font-weight:600; 
  color:#303030; 
  border-right:1px solid #ADD8E6; 
  border-bottom:1px solid #ADD8E6; 
  border-top:1px solid #ADD8E6; 
  letter-spacing:2px; 
  text-align:left; 
  padding:10px 0px 10px 0px; 
  white-space:nowrap; 
  text-align:center; 
  overflow: hidden; 
} 
.table td { 
  border-right:1px solid #ADD8E6; 
  border-bottom:1px solid #ADD8E6; 
  background:#fff; 
  font-size:12px; 
  padding:3px 3px 3px 6px; 
  color:#303030; 
  word-break:break-all; 
  word-wrap:break-word; 
  white-space:normal; 
} 
</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>

上面的程式碼實現了細線表格效果，程式碼非常的簡單這裡就不介紹了，並且使用也非常的遍歷，只要給響應的表格新增class="table"即可實現，當然此效果也不是萬能的，需要根據實際要求進行一些設定才行。

相關文章