漂亮CSS Tables
编程技术 / houtizong 发布于 3年前 68
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"utf-8" /> <title>漂亮CSS Tables</title> </head> <style type="text/css"> /* CSS Document */ 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; } /*power by www.winshell.cn*/ 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; } /*power by www.winshell.cn*/ 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; } </style> <body> <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"> <caption> </caption> <tr> <th scope="col">姓名</th> <th scope="col">年龄</th> <th scope="col">电话</th> <th scope="col">居住地点</th> </tr> <tr> <td class="row">badwolf</td> <td class="row">100</td> <td class="row">010-110</td> <td class="row">中国北京</td> </tr> </table> </body> </html>
上一篇：百科知识题
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
