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)


相关推荐

  • chmod a+x和chmod u+x区别

    chmod a+x和chmod u+x区别原文链接:https://www.cnblogs.com/tonyauto/p/8085551.htmlchmoda+xa.txt等价于chmod+xa.txt给所有用户给予a.txt文件可执行权限chmodu+xa.txta.txt文件的所有用户可执行权限chmodg+xa.txta.txt用户组可执行权限chmodo+xa.txta.txt其他用户可执行…

  • 手机修改ntp服务器地址,修改手机ntp服务器ip地址[通俗易懂]

    手机修改ntp服务器地址,修改手机ntp服务器ip地址[通俗易懂]修改手机ntp服务器ip地址内容精选换一换本文介绍使用云手机服务时需要了解的基本概念。云手机是一台包含原生安卓操作系统,具有虚拟手机功能的云服务器,简单来说,云手机=云服务器+AndroidOS。您可以远程实时控制云手机,实现安卓APP的云端运行;也可以基于云手机的基础算力,高效搭建应用,如云游戏、移动办公、直播互娱等场景。服务器是用来提供云手机的物理服务器。云手机目前以服务器您可以直接修改虚…

  • 解决Zookeeper无法启动

    解决Zookeeper无法启动通过命令:zkServer.shstart启动Zookeeper后,jps查看进程发现全部启动正确,但是在通过zkServer.shstatus查看启动状态,却出现如下现象:通过上述问题可以考虑到的点是配置的三台节点另外两台没有启动。但是可以确定的是另外两台节点也都启动了Zookeeper。解决方案:1.首先查看防火墙是否关闭。如果防火墙开启会影响三点节点的通信,导致接收不到另外两台节点信息。我是上午关闭了虚拟机,下午再打开时没有将防火墙关闭,查看防火墙果然处于活跃状态!赶紧将防火

  • java发送邮件代码[通俗易懂]

    java发送邮件代码[通俗易懂]java发送邮件首先需要通过对应的邮件服务转发到中间基站,再有接收方服务器接收邮件,转发给收件人,因此我们再发送邮件时需要先设定邮件发出服务(例如qq、网易等),在配置邮件发送协议以及发送人和接收人,最后设置邮件内容,此处我以正文中带有图片的代码为例!编写代码前,我们需要准备javax下的mail包和activation包。这个在文章的末位会提供下载地址,好了天冷屁股凉,我们直接上高速。。importjavax.mail.Authenticator;importjavax.mail.Mess

  • JAVA高并发的三种实现

    提到锁,大家肯定想到的是sychronized关键字。是用它可以解决一切并发问题,但是,对于系统吞吐量要求更高的话,我们这提供几个小技巧。帮助大家减小锁颗粒度,提高并发能力。初级技巧-乐观锁乐观锁使用的场景是,读不会冲突,写会冲突。同时读的频率远大于写。悲观锁的实现:悲观的认为所有代码执行都会有并发问题,所以将所有代码块都用sychronized锁住乐观锁的实现:…

  • 概念模型计算机二级,关系模型的基本概念

    概念模型计算机二级,关系模型的基本概念

    2021年11月28日

发表回复

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

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