html中table美化,漂亮的css table样式「建议收藏」

html中table美化,漂亮的css table样式「建议收藏」工作中发邮件通知人员样式总是一个麻烦事,工作的严肃性不能让邮件样式太花哨,但是又不能太简陋,所以找了下面的table样式和大家分享。效果如下图所示:漂亮CSSTables-幸凡学习网body{font:normal11pxauto”TrebuchetMS”,Verdana,Arial,Helvetica,sans-serif;color:#4f6b72;backgroun…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

工作中发邮件通知人员样式总是一个麻烦事,工作的严肃性不能让邮件样式太花哨,但是又不能太简陋, 所以找了下面的table样式和大家分享。

效果如下图所示:

2f791b914f0af2b16e4c415815479d6e.png

漂亮CSS Tables-幸凡学习网

body {

font: normal 11px auto “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

background: #E6EAE9;

}

a {

color: #c75f3e;

}

#mytable {

width: 700px;

padding: 0;

margin: 0;

}

caption {

padding: 0 0 5px 0;

width: 700px;

font: italic 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

text-align: right;

}

th {

font: bold 11px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

color: #4f6b72;

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

border-top: 1px solid #C1DAD7;

letter-spacing: 2px;

text-transform: uppercase;

text-align: left;

padding: 6px 6px 6px 12px;

background: #CAE8EA no-repeat;

}

th.nobg {

border-top: 0;

border-left: 0;

border-right: 1px solid #C1DAD7;

background: none;

}

td {

border-right: 1px solid #C1DAD7;

border-bottom: 1px solid #C1DAD7;

background: #fff;

font-size:11px;

padding: 6px 6px 6px 12px;

color: #4f6b72;

}

td.alt {

background: #F5FAFA;

color: #797268;

}

th.spec {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #fff no-repeat;

font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

}

th.specalt {

border-left: 1px solid #C1DAD7;

border-top: 0;

background: #f5fafa no-repeat;

font: bold 10px “Trebuchet MS”, Verdana, Arial, Helvetica, sans-serif;

color: #797268;

}

/*———for IE 5.x bug*/

html>body td{ font-size:11px;}

body,td,th {

font-family: 宋体, Arial;

font-size: 12px;

}

姓名 年龄 电话 居住地点
ok22.org 100 010-110 中国北京

大家有什么问题或技术上的想法可以在此与大家分享,也可以加入前端爱好者QQ群(141999928)一起学习进步:【幸凡前端技术交流群】

0

如果您觉得本文的内容对您的学习有所帮助,捐赠与共勉,支付宝(左)或微信(右)

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/191365.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 软件测试面试问题及答案_中软国际测试面试笔试题

    软件测试面试问题及答案_中软国际测试面试笔试题文章目录软测面试题附答案<二>二、接口面试题1、你们公司的接口测试流程是怎样的?2、接口测试里面如何分析一个bug是前端还是后端的?3、Jmeter参数化的方式有哪几种可以实现4、在接口测试中关联是什么含义?一般什么场景需要用到,postman中是怎样用的?5、常用的性能指标名称与具体含义?6、没有接口和文档怎么进行工作?三、自动化面试题1、Selenium中有哪几种元素定位方式?2、隐式等待与显式等待有什么不同?3、自动化测试里面遇到验证码,一般怎么处理比较好?四、安全1、什么是SQL注入攻击

    2022年9月29日
    1
  • autosize px转dp_Android 屏幕适配以及autoSize的原理.md

    autosize px转dp_Android 屏幕适配以及autoSize的原理.mdAndroidAutoSize的原理px=dp*density;根据百分比适配的话,如果设计稿给的是1080×1920,那么宽就为360dp,像素为1080px,density为3,占满100%如果是在720×1280的话,360dp*density=720,所以这个density为2,将density修改为2就可以了如果是在1080×1920的设计图中,150px,也就是50dp…

    2022年5月7日
    64
  • 什么是CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI?

    什么是CGI、FastCGI、PHP-CGI、PHP-FPM、Spawn-FCGI?

    2021年10月25日
    51
  • datagrip-2022.01.4 激活码[最新免费获取]

    (datagrip-2022.01.4 激活码)好多小伙伴总是说激活码老是失效,太麻烦,关注/收藏全栈君太难教程,2021永久激活的方法等着你。https://javaforall.net/100143.htmlIntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,上面是详细链接哦~747EFQ8BIF-eyJsaWNlbnNlSWQiOi…

    2022年3月31日
    852
  • msfconsole模块_msfconsole下载

    msfconsole模块_msfconsole下载Msfconsole提供了一个一体化的集中控制台。通过msfconsole,你可以访问和使用所有的metasploit的插件,payload,利用模块,post模块等等。Msfconsole还有第三方程序的接口,比如nmap,sqlmap等,可以直接在msfconsole里面使用。在启动MSF终端之后,可以首先输入help命令列出MSF终端所支持的命令列表,包括核心命令集和后端数据库命令集。对于其中的大部分命令,你可以输入help[COMMAND],进一步查看该命令的使用帮助信息。一、Msfconso

    2022年9月6日
    6
  • 解析DBR操作系统引导记录数据

    解析DBR操作系统引导记录数据

    2022年1月1日
    41

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号