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


相关推荐

  • 肝了半个月,我整理出了这篇嵌入式开发学习学习路线+知识点梳理)「建议收藏」

    肝了半个月,我整理出了这篇嵌入式开发学习学习路线+知识点梳理)「建议收藏」不好意思久等了这篇文章让小伙伴们久等了。一年多以来,关于嵌入式开发学习路线、规划、看什么书等问题,被问得没有一百,也有大几十次了。但是无奈自己对这方面了解有限,所以每次都没法交代,搞得实在不好意思。但是办法总归是有的,正如前篇文章《最近厚着脸皮联系了不少老同学》所聊,虽然我自己不从事这些方向,但寻思了一下,我的同学和朋友中,多少还是有一些从事相关方向并且在一线(或曾在一线)工作过的,所以我就请他们帮忙一起梳理这几个我不熟悉领域的学习路线,这次嵌入式开发就是其中之一。这篇文章之所以拖这么久,因为沟..

    2022年6月11日
    25
  • java 104规约_IEC104规约,Java开发主站程序

    java 104规约_IEC104规约,Java开发主站程序【实例简介】根据IEC1042002规约开发,适用于读写西门子IEC104协议的电表和网关【实例截图】【核心代码】IEC_emsClientService└──IEC_emsClientService├──bin│├──applicationContext_device.xml│├──applicationContext.xml│├──applicationConte…

    2022年6月20日
    35
  • 初探无水印信息图片加密技术「建议收藏」

    初探无水印信息图片加密技术「建议收藏」原文链接 https://yq.aliyun.com/articles/72267背景随着手机app越来越多,对于App信息安全面临的挑战越来越大,像接口传递的验证信息这些相对保密的信息如果直接放在app中明文,那么毫无疑问,很容易就被激活成功教程出来,想干嘛就干嘛。因为为了对部分本地信息加密,相处过无数的办法,本次讨论的重点,无水印信息图片加密。原理无水印信息图片加密,基

    2022年6月21日
    31
  • 提高网站页面加载速度的方法

    提高网站页面加载速度的方法

    2021年9月23日
    51
  • intellijidea2021最新激活码_最新在线免费激活

    (intellijidea2021最新激活码)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月26日
    63
  • 不能复制文字的网页文字复制怎么办_实现网页布局的方法

    不能复制文字的网页文字复制怎么办_实现网页布局的方法想必很多小伙伴遇到过这样的情况,在网上查找很多的资料,但是因为网页本身的限制不允许复制或者需要付费:遇到这种情况应该怎么办呢?接下来,就和大家分享下如何免费复制网页上不能复制的文字!解决方法一:转到打印界面进行复制:在需要复制文字的界面鼠标右键选择打印或者使用快捷键Ctrl+P,打开打印界面,在打印界面就可以进行复制操作啦!解决方法二:源代码界面复制在需要复制文字的界面鼠标右键选择“查看网页源代码”或者使用快捷键Ctrl+U,打开源代码界面,在源代码界面找到自己要复制的内容复

    2022年10月13日
    3

发表回复

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

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