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

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

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

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

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)
blank

相关推荐

  • 什么是多模态机器学习?「建议收藏」

    什么是多模态机器学习?「建议收藏」首先,什么叫做模态(Modality)呢?每一种信息的来源或者形式,都可以称为一种模态。例如,人有触觉,听觉,视觉,嗅觉;信息的媒介,有语音、视频、文字等;多种多样的传感器,如雷达、红外、加速度计等。以上的每一种都可以称为一种模态。同时,模态也可以有非常广泛的定义,比如我们可以把两种不同的语言当做是两种模态,甚至在两种不同情况下采集到的数据集,亦可认为是两种模态。因此,多模态机器学习,英文全…

  • cstring头文件是什么_class可以作为标识符吗

    cstring头文件是什么_class可以作为标识符吗关于在VC++中对CString进行引用时,需要按使用情况添加不同的头文件(1)atlstr.h——————————-非MFC工程中.(2)afx.h———————————-MFC工程中.

  • js生成二维码_js生成二维码并保存

    js生成二维码_js生成二维码并保存js生成二维码一、一个简单的示例前段时间项目中需要开发扫描二维码查看信息的功能,在网上查了一些资料,把用过的方法进行总结需要导入一个qrcode的js插件。一、一个简单的示例如下:(仅供参考)<%–CreatedbyIntelliJIDEA.User:ASUSauthor:xumzDate:2021/2/27Time:10:33搬运请备注TochangethistemplateuseFile|Settings|Fil

    2022年10月18日
  • 探索Qi协议「建议收藏」

    探索Qi协议「建议收藏」Qi是WPC推出的无线充电协议,面向手机和其他便携移动设备。

  • java setattribute_java – HttpSession setAttribute并不总是插入新对象「建议收藏」

    java setattribute_java – HttpSession setAttribute并不总是插入新对象「建议收藏」我正在从WLS10g和JavaEE6升级到WLS12c和JavaEE7.我注意到HttpSession.setAttribute的工作方式有所不同.在WLS10中,任何已存储在某个键下的对象都将被替换.在WLS12中,如果newObject.equals(oldObject),则不替换该对象.这对我们来说是个问题,因为应用程序有这样的对象:classValueObject{intkey;St…

  • 数据结构之排序算法建议收藏

    排序(Sorting),特别是高效的排序一直是计算机工作学习和研究的重要课题之一,排序有内部排序和外部排序之分,若整个排序过程不需要访问外存便能完成,则称此类排序为内部排序,反之则为外部排序。本篇将对

    2021年12月19日

发表回复

您的电子邮箱地址不会被公开。

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