文章来源 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样式表格的更多相关文章

  1. 常用的四种CSS样式表格

    1. 单像素边框CSS表格 这是一个很常用的表格样式. [html] <style type="text/css"> table.gridtable { font-fa ...

  2. 四个漂亮的CSS样式表

    1. 单像素边框CSS表格 这是一个非经常常使用的表格样式. 源码: <!-- CSS goes in the document HEAD or added to your external s ...

  3. css样式 -- 表格不会因为字体过长导致字体溢出的问题

    常常碰到因为表格大小就麽大了,字体过长会爆炸溢出的问题,我们后端就用这个可以了,溢出的可以省略号 ... 代替好了. /* 在表格css样式加上这三个就可以了 效果就会变成 “abc...” */ { ...

  4. LODOP打印超文本字符串拼接2 单选选择css样式表格

    之前的相关字符串拼接的博文:LODOP打印超文本字符串拼接1 固定表格填充数值之前博文介绍过,字符串可以随意拼接,只要最后组织成的字符串是自己需要的超文本就可以了,前面还有一篇也是拼接样式的:Lodo ...

  5. Web前端开发基础 第四课(认识CSS样式)

    CSS代码语法 css 样式由选择符和声明组成,而声明又由属性和值组成,如下图所示: 选择符:又称选择器,指明网页中要应用样式规则的元素,如本例中是网页中所有的段(p)的文字将变成蓝色,而其他的元素( ...

  6. css样式-表格优化

    1.表格的初步优化 index.html <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  7. 三、CSS样式——表格

    1.CSS表格 CSS表格属性可以帮助我们极大的改善表格的外观 2.表格边框 3.折叠边框 4.表格宽高 5.表格文本对齐 6.表格内边距  7.表格颜色 <!--index.html--> ...

  8. css样式--表格

    1.示例源码 <!DOCTYPE html><html><head><meta charset="utf-8"> <title ...

  9. css样式表格边框1px hover时为2px 实现方式

    //css .flclass-cont .flclass-cont-box{width:%;display:inline-block;font-size:;margin:10px;position:r ...

随机推荐

  1. Java基础(33):StringBuilder的方法与应用实例(String相关类)

    Java 中的 StringBuilder 类的常用方法 重要的事情说三遍: 在需要频繁对字符串进行修改操作时使用 StringBuilder 的效率比 String 要高 在需要频繁对字符串进行修改 ...

  2. ZOJ 3645 BiliBili(高斯消元)

    Shirai Kuroko is a Senior One student. Almost everyone in Academy City have super powers, and Kuroko ...

  3. 变形--旋转 rotate()

    旋转rotate()函数通过指定的角度参数使元素相对原点进行旋转.它主要在二维空间内进行操作,设置一个角度值,用来指定旋转的幅度.如果这个值为正值,元素相对原点中心顺时针旋转:如果这个值为负值,元素相 ...

  4. PAT乙级 1002. 写出这个数 (20)

    1002. 写出这个数 (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 8000 B 判题程序 Standard 作者 CHEN, Yue 读入一个自然数n,计算其各位数字 ...

  5. 「ruby/MiniMagick」用MiniMagick处理图片

    包的选择和配置 想用RMagick,但据说内存泄露的问题比较厉害,作为替代品MiniMagick不存在内存泄露的问题.而二者都是使用ImageMagick的,所以需要下载并安装ImageMagick. ...

  6. C#中Attribute的继承

    在C#中Attribute是个非常有用的语法,本文不会介绍Attribute的使用方法,如果想了解Attribute的详细信息请查阅MSDN及网上相关文档.C#中的Attribute有两个地方是和继承 ...

  7. Angularjs之directive指令学习笔记(二)

    1.Directive的五个实例知道driective作用.其中字段restrict.template. replace.transclude.link用法 参考文章链接地址:http://damoq ...

  8. 【python cookbook】【数据结构与算法】7.让字典保持有序

    问题:创建一个字典,同时对字典做迭代或序列化操作时,也能控制其中元素的顺序: 解决方案:可以使用collections模块中的OrderedDict类来控制字典中元素的顺序.当对字典做迭代时,他会严格 ...

  9. 161028、Nginx负载均衡实现tomcat集群方案简要小结

    重点两部分:一.负载均衡二.tomcat集群 所谓tomcat集群,就是可以向外提供并行服务的多台机器,任何一台服务器宕机,其它服务器可以替代它向外提供服务,而不影响用户访问. Nginx是一个常用的 ...

  10. laravel运行url404错误

    url输入正确的根目录时老是提示404错误,竟然不知道为什么,稀里糊涂的,最后发现输入url时后面默认会加上一个\,一定记得把\去掉!!!!