分享两种好看的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>

分享两种好看的CSS表格样式相关推荐

  1. 分享7款颜色的CSS表格样式美化网页表格用户体验

    原文出处:http://www.laozuo.org/4631.html 老左并不是一名网页设计师,但是经常在博客上捣鼓.修改一些自认为不太好的用户体验也仅仅局限在修改一些简单的CSS样式上,遇到不能 ...

  2. 四款好看实用的CSS表格样式分享

    文章参考: https://www.w3cschool.cn/css/css-sfrk2opy.html https://www.php.cn/css-tutorial-375461.html htt ...

  3. PDF怎么编辑修改内容？分享两种编辑修改方法

    PDF文件怎么编辑修改内容呢?PDF格式的文件是大家在工作中经常会使用到的,可以用来发送文件.阅读文件或者是保存文件.相信大家在阅读使用的时候,肯定有过需要编辑修改文件内容的需求,因为当我们发现文件中 ...

  4. 一款清爽的CSS表格样式

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""http://www.w3.org/TR/xhtm ...

  5. 什么软件可以拍证件照电子版？分享两种拍证件照小妙招

    有什么软件可以直接拍出电子版证件照呢?相信大家已经发现现在办理很多业务或者是事情都会使用到证件照,大家的证件照很多都是拍了已经很久了,与现在的差别比较大不能用,又或者是证件照用完了又急需要用证件照,这 ...

  6. 能够修改证件照的软件有哪些？分享两种好用的修改工具

    能够修改证件照的软件有哪些呢?在我们的日常生活中,证件照可以说是必不可少的一种证件,在很多方面都可能会使用到.如工作简历,银行办理业务,网上报名考试等,都需要证件照才可以进行下去.但是对于证件照的尺寸 ...

  7. 如何给html文件夹密码,怎样给文件夹加上密码_分享两种给文件夹设密码的方法...

    现在大家习惯把重要的文件或比较隐私的文件存放在电脑上,出于安全考虑,大家会选择给文件夹设密码.但是问题来了,怎样给文件夹加密码呢?估计大多数的人都还不太清楚该怎么设置吧,别着急,这里小编分享两种给文件 ...

  8. 怎么转换CAD文件的版本？分享两种转换版本的方法

    CAD文件的版本怎么转换呢?大家如果有使用CAD编辑软件的小伙伴肯定遇到过CAD文件打不开的现象,出现这种情况如果排除了文件自身收到损坏之外,那么大概率就是CAD文件的版本问题了,遇到低版本或高版本的 ...

  9. 两寸标准证件照大小是多少？分享两种调整尺寸的方法

    两寸标准的证件照大小是多少?大家在使用证件照的时候,在不同的场景需求下使用是有不同的尺寸要求的,其中两寸证件照就是我们最常用的一种尺寸,像一些证件上面的照片或者是护照签证等,很多都是使用两寸照片.很多 ...

最新文章

  1. 【 Vivado 】输出延迟约束(Constraining Ouput Delay)
  2. x window的奥秘
  3. [C++]Call virtual member function in constructor or destructor
  4. 如何理解Java的类变量、成员变量、常量、类属性、实例属性、字段（field）、成员方法、类方法
  5. 使您的Java代码闻起来很新鲜
  6. 第1届ICPC青少年程序设计竞赛（正式赛）A 题 - Divide
  7. 计算机专业创新项目,计算机专业本科生的创新思维
  8. ELK下es的分词器analyzer
  9. ICPC2020小米网络选拔赛第一场复盘
  10. RDD持久化(缓存)
  11. 交换机千兆和百兆对网速影响_电信宽带升级为200M，为什么网速没有提升多少？...
  12. bugfree 数据库配置 显示No such file or directory
  13. 通过vmstat命令判断服务器瓶颈
  14. access做mysql前端,ASP+ACCESS留言板制作详细教程
  15. mysql 主键约束起名_MySQL名称的主键约束
  16. 百度收购91无线，效果未必如愿
  17. iOS 加密算法之MD5加密使用
  18. log4j的使用和log4j过时问题的解决
  19. 【大唐杯备考】——5G网络组网部署（学习笔记）
  20. Websphere之HTTPS配置

热门文章

  1. 调试小细节之《电阻封装不同带来的影响》
  2. Timer定时器 Windows
  3. 实习“满月”工作感受
  4. I2C总线为什么要接上拉电阻
  5. ARM学习（3） 异常模式学习（CortexR5）
  6. 重要‼️入职前要问的问题，详细实用！应届生一定要看
  7. 2022-07-08 clickhouse向量化column
  8. Arm通用计时器简介
  9. 快速压缩工具Zstd
  10. 命令查看Linux服务器内存、CPU、显卡、硬盘使用情况