css table细线表格代码

2018-3-6 09:48| 发布者: antzone| 查看: 667| 评论: 0|来自: 蚂蚁部落

默认状态下的表格边框是十分的丑陋的,如果直接应用与客户的网站,那反响是可想而知的。

下面是一段非常美观的细线表格代码实例和大家分享一下。

代码如下:

[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"即可实现,当然此效果也不是万能的,需要根据实际要求进行一些设置才行。


鲜花

握手

雷人

路过

鸡蛋

最新评论

返回顶部