码迷,mamicode.com
首页 > Web开发 > 详细

四个好看的CSS样式表格

时间:2015-12-12 23:12:25      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

文章来源 http://www.cnphp6.com/archives/58020

 

1. 单像素边框CSS表格

这是一个非经常常使用的表格样式。

技术分享

 

源码:


 

2. 带背景图的CSS样式表格

和上面差点儿相同,只是每一个格子里多了背景图。

 

技术分享

技术分享cell-blue.jpg

技术分享cell-grey.jpg

 

1. 下载上面两张图,命名为cell-blue.jpg和cell-grey.jpg

2. 拷贝以下的代码到你想要的地方,记得改动图片url


 

3. 自己主动换整行颜色的CSS样式表格(须要用到JS)

这个CSS样式表格自己主动切换每一行的颜色,在我们须要频繁更新一个大表格的时候非常实用。

技术分享

 

代码:


 

4. 鼠标悬停高亮的CSS样式表格 (须要JS)

纯CSS显示表格高亮在IE中显示有问题,所以这边使用了JS来做高亮(因为csdn博客限制了js的使用,我会在最近将博客迁移放到自己的web主机上)。

技术分享

 

有一点要小心的是,不要定义格子的背景色。


最常见的几种CSS样式表格都在这了,希望对大家有帮助

四个好看的CSS样式表格

标签:

原文地址:http://www.cnblogs.com/jthb/p/5041879.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!