你的位置:首页 > 网页设计

[网页设计]css实现的美观的table细线表格代码实例


css实现的美观的table细线表格代码实例:
默认状态下的表格边框是十分的丑陋的,如果直接应用与客户的网站,那反响是可想而知的。
下面是一段非常美观的细线表格代码实例和大家分享一下。
代码如下:

<!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>

上面的代码实现了细线表格效果,代码非常的简单这里就不介绍了,并且使用也非常的遍历,只要给响应的表格添加即可实现,当然此效果也不是万能的,需要根据实际要求进行一些设置才行。

原文地址是:http://www.softwhy.com/divcss/