随笔 - 317, 文章 - 0, 评论 - 453, 阅读 - 114万
  博客园  :: 首页  :: 新随笔  :: 订阅 订阅  :: 管理

Table 样式

Posted on   PHP-张工  阅读(1538)  评论(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

编辑推荐:
· PostgreSQL 和 SQL Server 在统计信息维护中的关键差异
· C++代码改造为UTF-8编码问题的总结
· DeepSeek 解答了困扰我五年的技术问题
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
阅读排行:
· DeepSeek智能编程
· 精选4款基于.NET开源、功能强大的通讯调试工具
· [翻译] 为什么 Tracebit 用 C# 开发
· 腾讯ima接入deepseek-r1,借用别人脑子用用成真了~
· DeepSeek崛起:程序员“饭碗”被抢,还是职业进化新起点?
点击右上角即可分享
微信分享提示