分享两种好看的CSS表格样式

最新推荐文章于 2024-03-05 19:30:22 发布

阿贝不聪明

最新推荐文章于 2024-03-05 19:30:22 发布

阅读量1.1w

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/linyiphp/article/details/79021087

版权

CSS 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

分享两种好看的CSS表格样式，要的摘走，呵呵（如上图）。
代码：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分享两种好看的CSS表格样式</title>
<style type="text/css">
#hor-minimalist-a { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; background: #fff; width: 480px; border-collapse: collapse; text-align: left; margin: 20px; }
#hor-minimalist-a th { font-size: 14px; font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; }
#hor-minimalist-a td { color: #669; padding: 9px 8px 0; }
#hor-minimalist-a tbody tr:hover td { color: #009; }
#hor-minimalist-b { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; background: #fff; width: 480px; border-collapse: collapse; text-align: left; margin: 20px; }
#hor-minimalist-b th { font-size: 14px; font-weight: normal; color: #039; border-bottom: 2px solid #6678b1; padding: 10px 8px; }
#hor-minimalist-b td { border-bottom: 1px solid #ccc; color: #669; padding: 6px 8px; }
#hor-minimalist-b tbody tr:hover td { color: #009; }
</style>
</head>
<body>
<table id="hor-minimalist-a" summary="Employee Pay Sheet">
    <thead>
        <tr>
            <th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
            <td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
            <td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>
<table id="hor-minimalist-b" summary="Employee Pay Sheet">
    <thead>
        <tr>
            <th scope="col">Employee</th>
            <th scope="col">Salary</th>
            <th scope="col">Bonus</th>
            <th scope="col">Supervisor</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Stephen C. Cox</td>
            <td>$300</td>
            <td>$50</td>
            <td>Bob</td>
        </tr>
        <tr>
            <td>Josephin Tan</td>
            <td>$150</td>
            <td>-</td>
            <td>Annie</td>
        </tr>
        <tr>
            <td>Joyce Ming</td>
            <td>$200</td>
            <td>$35</td>
            <td>Andy</td>
        </tr>
        <tr>
            <td>James A. Pentel</td>
            <td>$175</td>
            <td>$25</td>
            <td>Annie</td>
        </tr>
    </tbody>
</table>
</body>
</html>

阿贝不聪明

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
4
评论
分享两种好看的CSS表格样式

分享两种好看的CSS表格样式，要的摘走，呵呵（如上图）。代码：分享两种好看的CSS表格样式#hor-minimalist-a { font-family: "Lucida Sans Unicode", "Lucida Grande", Sans-Serif; font-size: 12px; background: #fff; width: 480px; border-collapse: coll
复制链接

扫一扫