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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • sql server 与mysql的区别_sql server的优缺点

    sql server 与mysql的区别_sql server的优缺点最近在自学jsp,这就少不了和数据库打交道啊,相信大家对SQLserver和MySQL不陌生吧。在视频上老师用的是sqlserver数据库,但是我用的时候却是mysql数据库,可真的是吃了不少的苦头啊。直接上代码吧62至64行代码要实现的是查询的是第几个页面的内容,按照sqlserver的查询语法是完全没有问题的,否则代码上直接显示红色了。但是就在启动tomcat的时…

    2022年10月2日
    3
  • Spring AOP 切面@Around注解的具体使用

    Spring AOP 切面@Around注解的具体使用@Around注解可以用来在调用一个具体方法前和调用后来完成一些具体的任务。比如我们想在执行controller中方法前打印出请求参数,并在方法执行结束后来打印出响应值,这个时候,我们就可以借助于@Around注解来实现;再比如我们想在执行方法时动态修改参数值等类似功能的注解还有@Before等等,用到了SpringAOP切面思想,SpringAOP常用于拦截器、事务、日志、权限验…

    2022年7月15日
    41
  • 级联分类器原理(级联器是什么)

    级联分类器即为Emgucv中的CascadeClassifier。使用CascadeClassifier来加载一个.xml分类器文件,然后使用DetectMultiScale函数来对图片进行检测。这是DetectMultiScale函数。publicRectangle[]DetectMultiScale(IInputArrayimage,doublescaleFactor=1.

    2022年4月10日
    287
  • Java笔记二十四——Spring开发

    Java笔记二十四——Spring开发Spring是一个支持快速开发JavaEE应用程序的框架。它提供了一系列底层容器和基础设施,并可以和大量常用的开源框架无缝集成,可以说是开发JavaEE应用程序的必备。在SpringFramework(最核心的Spring框架)基础上,又诞生了SpringBoot、SpringCloud、SpringData、SpringSecurity等一系列基于SpringFramework的项目。SpringFrameworkIoC容器容器是一种为某种特定组件的运行提供必要支持的一个软件环

    2022年5月16日
    38
  • datagrip 激活码【注册码】

    datagrip 激活码【注册码】,https://javaforall.net/100143.html。详细ieda激活码不妨到全栈程序员必看教程网一起来了解一下吧!

    2022年3月18日
    59
  • SQLyog客户端无法连接mysql「建议收藏」

    SQLyog客户端无法连接mysql「建议收藏」忘记截图了,只能描述下报错信息:Host ‘服务器地址’ is not allowed to connect to this MySQL server解决方法:添加用户权限1.登录服务端mysql2.在mysql输入命令GRANT ALL PRIVILEGES ON *.* TO ‘root’@’IP地址’ IDENTIFIED BY ‘你设置的密码’ WITH GRANT O…

    2022年8月18日
    24

发表回复

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

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