table 样式美化
1. 单像素边框CSS表格
这是一个很常用的表格样式。
源代码:
![](/assets/blank.gif)
1 <!-- CSS goes in the document HEAD or added to your external stylesheet -->2 <style type="text/css">3 table.gridtable {4 font-family: verdana,arial,sans-serif;5 font-size:11px;6 color:#333333;7 border-width: 1px;8 border-color: #666666;9 border-collapse: collapse; 10 } 11 table.gridtable th { 12 border-width: 1px; 13 padding: 8px; 14 border-style: solid; 15 border-color: #666666; 16 background-color: #dedede; 17 } 18 table.gridtable td { 19 border-width: 1px; 20 padding: 8px; 21 border-style: solid; 22 border-color: #666666; 23 background-color: #ffffff; 24 } 25 </style> 26 27 <!-- Table goes in the document BODY --> 28 <table class="gridtable"> 29 <tr> 30 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 31 </tr> 32 <tr> 33 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 34 </tr> 35 <tr> 36 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 37 </tr> 38 </table>
![](/assets/blank.gif)
2. 带背景图的CSS样式表格
和上面差不多,不过每个格子里多了背景图。
cell-blue.jpg
cell-grey.jpg
1. 下载上面两张图,命名为cell-blue.jpg和cell-grey.jpg
2. 拷贝下面的代码到你想要的地方,记得修改图片url
![](/assets/blank.gif)
1 <!-- CSS goes in the document HEAD or added to your external stylesheet -->2 <style type="text/css">3 table.imagetable {4 font-family: verdana,arial,sans-serif;5 font-size:11px;6 color:#333333;7 border-width: 1px;8 border-color: #999999;9 border-collapse: collapse; 10 } 11 table.imagetable th { 12 background:#b5cfd2 url('cell-blue.jpg'); 13 border-width: 1px; 14 padding: 8px; 15 border-style: solid; 16 border-color: #999999; 17 } 18 table.imagetable td { 19 background:#dcddc0 url('cell-grey.jpg'); 20 border-width: 1px; 21 padding: 8px; 22 border-style: solid; 23 border-color: #999999; 24 } 25 </style> 26 27 <!-- Table goes in the document BODY --> 28 <table class="imagetable"> 29 <tr> 30 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 31 </tr> 32 <tr> 33 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 34 </tr> 35 <tr> 36 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 37 </tr> 38 </table>
![](/assets/blank.gif)
3. 自动换整行颜色的CSS样式表格(需要用到JS)
这个CSS样式表格自动切换每一行的颜色,在我们需要频繁更新一个大表格的时候很有用。
代码:
![](/assets/blank.gif)
1 <!-- Javascript goes in the document HEAD -->2 <script type="text/javascript">3 function altRows(id){4 if(document.getElementsByTagName){ 5 6 var table = document.getElementById(id); 7 var rows = table.getElementsByTagName("tr"); 8 9 for(i = 0; i < rows.length; i++){ 10 if(i % 2 == 0){ 11 rows[i].className = "evenrowcolor"; 12 }else{ 13 rows[i].className = "oddrowcolor"; 14 } 15 } 16 } 17 } 18 19 window.οnlοad=function(){ 20 altRows('alternatecolor'); 21 } 22 </script> 23 24 25 <!-- CSS goes in the document HEAD or added to your external stylesheet --> 26 <style type="text/css"> 27 table.altrowstable { 28 font-family: verdana,arial,sans-serif; 29 font-size:11px; 30 color:#333333; 31 border-width: 1px; 32 border-color: #a9c6c9; 33 border-collapse: collapse; 34 } 35 table.altrowstable th { 36 border-width: 1px; 37 padding: 8px; 38 border-style: solid; 39 border-color: #a9c6c9; 40 } 41 table.altrowstable td { 42 border-width: 1px; 43 padding: 8px; 44 border-style: solid; 45 border-color: #a9c6c9; 46 } 47 .oddrowcolor{ 48 background-color:#d4e3e5; 49 } 50 .evenrowcolor{ 51 background-color:#c3dde0; 52 } 53 </style> 54 55 56 <!-- Table goes in the document BODY --> 57 <table class="altrowstable" id="alternatecolor"> 58 <tr> 59 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 60 </tr> 61 <tr> 62 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 63 </tr> 64 <tr> 65 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 66 </tr> 67 </tr> 68 <tr> 69 <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td> 70 </tr> 71 <tr> 72 <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td> 73 </tr> 74 <tr> 75 <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td> 76 </tr> 77 </table> 78 79 <!-- The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->
![](/assets/blank.gif)
4. 鼠标悬停高亮的CSS样式表格 (需要JS)
纯CSS显示表格高亮在IE中显示有问题,所以这边使用了js来做高亮(由于csdn博客限制了js的使用,我会在近期将博客迁移放到自己的web主机上)。
有一点要小心的是,不要定义格子的背景色。
![](/assets/blank.gif)
1 <!-- CSS goes in the document HEAD or added to your external stylesheet -->2 <style type="text/css">3 table.hovertable {4 font-family: verdana,arial,sans-serif;5 font-size:11px;6 color:#333333;7 border-width: 1px;8 border-color: #999999;9 border-collapse: collapse; 10 } 11 table.hovertable th { 12 background-color:#c3dde0; 13 border-width: 1px; 14 padding: 8px; 15 border-style: solid; 16 border-color: #a9c6c9; 17 } 18 table.hovertable tr { 19 background-color:#d4e3e5; 20 } 21 table.hovertable td { 22 border-width: 1px; 23 padding: 8px; 24 border-style: solid; 25 border-color: #a9c6c9; 26 } 27 </style> 28 29 <!-- Table goes in the document BODY --> 30 <table class="hovertable"> 31 <tr> 32 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 33 </tr> 34 <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';"> 35 <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td> 36 </tr> 37 <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';"> 38 <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td> 39 </tr> 40 <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';"> 41 <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td> 42 </tr> 43 <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';"> 44 <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td> 45 </tr> 46 <tr οnmοuseοver="this.style.backgroundColor='#ffff66';" οnmοuseοut="this.style.backgroundColor='#d4e3e5';"> 47 <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td> 48 </tr> 49 </table>
![](/assets/blank.gif)
转载于:https://www.cnblogs.com/borter/p/9480211.html
table 样式美化相关推荐
- 自定义css样式美化博客园
写在前面 csdn的markdown放到博客园里感觉风格迥异,所以还是找个好点的css吧,css这个我没有深入了解,拼凑了一个css.对于有python代码,而且需要自动生成目录的博文很有帮助,其他的 ...
- 还不错的Table样式和form表单样式
作为一个后台开发人员而言,拥有一套属于自己的前台样式是比较重要的,这里分享一下自己感觉还不错的样式,以后遇到好的,还会陆续添加 上图: 带鼠标滑动效果的table样式看起来比较清爽 样式 <he ...
- html5复选框样式,11种炫酷CSS3复选框checkbox样式美化效果
这是一款效果非常酷的CSS3复选框checkbox样式美化效果.该复选框美化效果共有11种.默认的复选框的样式十分不好看,该效果将复选框加一美化,带上了一些动画效果,其中一些制作为滑动按钮的样式. 使 ...
- html表单复选框样式,美化表单——自定义checkbox和radio样式
如果你对本站比较观注的话,应该很清楚,前面就有这方面的介绍.因为大家都知道表单中的部分元素如果单单使用CSS是没办法完成的,所以最近花全力在学习这方面的制作.在本站有关于这样制作有好几个教程了,比如说 ...
- option样式美化 css,CSS select样式优化
下拉选择菜单基本的CSS样式不怎么好看,通过一些简单的样式优化,就可以起到美化的作用了. 请选择您所在的城市 请选择您所在的城市 中山市 太原市 广州市 CSS样式 .sel_wrap{ height ...
- Html漂亮的table样式模板
模板案例: table样式: <style scoped> table{border-collapse: collapse;margin: 0 auto;text-align: cente ...
- CSS前端样式美化总结
css按钮样式美化 .login-button { /* 按钮美化 */ width: 270px; /* 宽度 */ height: 40px; /* 高度 */ borde ...
- 手机端自适应表格table样式如何写
有时候我们的网页需要展示一些表格的内容,在pc端是很好控制它的展现方式的,但是到移动端就非常难控制了,那么该怎么做呢? 比如上图就是没控制好的移动端的表格table样式,展示非常的凌乱. 这个就是写好 ...
- Bootstrap 之Table样式
将<table>标签添加class='table' 类后的样式 <html> <head><meta name="viewport" co ...
- 微信小程序开发笔记二(WXSS和CSS样式美化)
微信小程序开发笔记二(WXSS和CSS样式美化) 一.CSS基本知识 1.Class选择器的定义 2.ID选择器的定义 3.ID选择器和class选择器的区别 4.CSS中设置颜色 5.CSS中的文本 ...
最新文章
- 这就是我为什么推荐使用var aa = for (var i = 0, l = aa.length; i < l; i++) {var a = aa[i];}循环的原因,每秒最快可以执行4000+次!
- Nat. Biotechnol.| 基于生物活性建模识别抗SARS-CoV-2药物
- split join append
- fast_recovery_area无剩余空间(ORA-19815)
- MicroPython (一)点亮我的Led
- 阅读后这篇文章后,python正则表达式完全弄懂了
- java 数组以逗号分隔_在java中使用逗号分隔符拆分字符串数组
- oracle安装 插件的执行方法失败_解决 VS Code 中 golang.org 被墙导致的 Go 插件安装失败问题...
- 2012.4.16总结(四)
- dhcp 续约review报文_DHCP工作原理( DHCP地址续约和释放)
- oracle视频教程11g入门运维DBA性能优化OCP培训SQL数据库在线课程
- Mysql最常用的十大函数
- Python GUI案例之看图猜成语开发(完结篇)
- QQ小程序 应用类型不匹配
- SAP中在FS00中显示组科目表(集团科目表)
- 实时时间(24小时制)
- 薅羊毛 | Python 自动化带你轻松赚钱(完结版)
- 星际争霸2免修改器修改绝对一劳永逸
- Windows python3安装word2vec模块常见错误处理
- 国内虚拟主机及国内空间商排名【转】
热门文章
- JAVA面向对象之对象和类
- 学累了可以看漫威电影啊
- 戴上这个之后,你再也不是个凡人(doge)
- c语言如何遍历数组,C语言数组遍历
- 【全网世界区划最全整理输出之第二部分】全世界所有国家的行政区划整理,省市信息,已按照国家,省,市排好序,可直接复制使用,第二部分到8167行,总条数:21088
- 笛卡尔积生成商品SKU
- 博思得标签打印机驱动_博思得 Postek 打印机驱动下载
- 计算机维修管理平台软件,美萍电脑行业管理软件(电脑业务管理系统、电脑维修管理系统、组装业务、电脑装机管理软件)--管理软件,美萍是专家!...
- ABTest效果检验样本量计算
- 如何判断是否是webservice接口