博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

Table 样式

Posted on 2011-11-29 17:27  PHP-张工  阅读(1536)  评论(0)  编辑  收藏  举报

效果：

代码： 

<!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;
    }
    .tbData 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>

下载：https://files.cnblogs.com/zjfree/TableCss.rar