CSS细线表格的简单代码

2018-7-3 21:55| 作者: admin| 查看: 388| 评论: 0|来自: 蚂蚁部落

table自带的边框效果太难看了,下面介绍一种实现细线表格的简单方法。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>table细线表格-蚂蚁部落</title> 
<style type="text/css">  
table{border-collapse:collapse;} 
td
{
  background:#F2F2F2;
  border:solid 1px #CCCCCC;
  width:100px;
  height:22px;
} 
</style>  
</head>  
<body>  
<table  id="thetable"> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
  <tr> 
    <td>蚂蚁部落一</td> 
    <td>蚂蚁部落二</td> 
    <td>蚂蚁部落三</td> 
    <td>蚂蚁部落四</td> 
  </tr> 
</table> 
</body>  
</html>

具体使用了border-collapse属性,可以参阅CSS border-collapse一章节。 


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部