Table样式css
演示效果：
实现代码：
<!DOCTYPE html>
<html>
<head>
<title>TABLE 样式</title>
<style type="text/css">
.tbData
{
border-collapse:collapse;
border:solid 3px #ddd;
font-family:Courier New, Tahoma, 宋体;
font-size:14px;
color:#333;
background-color:white;
border-spacing:0px;
}
.tbData td, th
{
border:solid 1px #ddd;
padding:3px 5px;
}
.tbData th
{
border-bottom:solid 2px #ddd;
background-color:#f8f8f8;
font-weight:normal;
padding:3px 8px;
}
tr:hover td
{
border-bottom:solid 1px blue;
}
</style>
</head>
<body>
<div>
<table class="tbData">
<tr>
<th>标题1</th>
<th>标题2</th>
<th>标题3</th>
<th>标题4</th>
<th>标题5</th>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>汉字测试</td>
<td>2001-01-01 11:11</td>
</tr>
<tr style="background-color:#fef;">
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>汉字测试</td>
<td>2001-01-01 11:11</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td style="color:Blue;">asdf</td>
<td>汉字测试</td>
<td>2001-01-01 11:11</td>
</tr>
<tr>
<td>asdf</td>
<td>asdf</td>
<td>asdf</td>
<td>汉字测试</td>
<td>2001-01-01 11:11</td>
</tr>
</table>
</div>
</body>
</html>
上一篇：CSS3旋转代码
我要评论