css table细线表格代码
分类：实例代码
css table细线表格代码属于前端实例代码，有关更多实例代码大家可以查看。
默认状态下的表格边框是十分的丑陋的，如果直接应用与客户的网站，那反响是可想而知的。
下面是一段非常美观的细线表格代码实例和大家分享一下。
代码如下:
<!DOCTYPE html><html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<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"即可实现，当然此效果也不是万能的，需要根据实际要求进行一些设置才行。
css table细线表格代码，这样的场景在实际项目中还是用的比较多的，关于css table细线表格代码就介绍到这了。