CSS細線表格效果

admin發表於2018-05-11
CSS

在使用佈局的時候不提倡使用table，但table並非是一個不能使用的元素，只要和CSS配合使用得當，具有相當的威力。

特地的情況使用table比使用div更有優勢，例如在製作表格，但是表格自帶的邊框比較醜陋。

下面介紹一下如何使用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:300px;
  height:60px;
  background-color:green;
}
table td{
  background-color:white;
}
</style>
</head>
<body>
<table cellspacing="1">
  <tr>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
  </tr>
  <tr>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
    <td>單元格</td>
  </tr>
</table>
</body>
</html>

以上程式碼通過設定table的cellspacing屬性值為1px，然後再設定table的背景顏色為綠色，再將單元格的背景顏色設定為白色，那麼就能夠顯露出來1px的“邊框”效果。

相關文章