文章来源 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. 结构体. ->操作符的内涵

    实质上就是结构体成员相对于结构体大变量的偏移地址, 操作符所干的事情就是寻址.是偏移,是偏移,是偏移.偏移后的地址

  2. windows系统调用 进程快照

    #include "windows.h" #include "tlhelp32.h" #include "iostream" using n ...

  3. struts_22_xwork校验器列表使用说明

    系统提供的校验器列表如下: required (必填校验器,要求field的值不能为null) requiredstring (必填字符串校验器,要求field的值不能为null,并且长度大于0,默认 ...

  4. WCF和Web Service的 区(guan)别(xi)

    参考文献:http://social.microsoft.com/Forums/zh-CN/c06420d1-69ba-4aa6-abe5-242e3213b68f/wcf-webservice 之前 ...

  5. java dom4j写入XML

    引用的两个jar包 dom4j-1.6.1.jar jaxen.jar //=========================代码 import java.io.FileWriter;import j ...

  6. redis连接数问题

    redis连接数查看 info client redis连接数满了,不会继续建立连接. 造成redis连接数满了原因有很多. 1.建立新连接不close()的话redis连接不会回归连接池. 显示所有 ...

  7. Trace Sys

    ARM片上调试和跟踪解决方案(包括CoreSight体系结构,嵌入式跟踪宏单元(ETM),程序流程跟踪(PTM),ARM调试接口(ADI), 跟踪缓冲器(ETB),嵌入式交叉触发器(CTM)) Cor ...

  8. [Ubuntu] google chrome乱码

    问题描述 ubuntu14.04,之前google chrome一直都是好好的,升级过相关软件,之后就是乱码了,如图 经过google的努力,找到解决方法,原因未明. 解决方案 sudo /etc/f ...

  9. archlinux 网络配置

    https://wiki.archlinux.org/index.php/Network_configuration_%28%E7%AE%80%E4%BD%93%E4%B8%AD%E6%96%87%2 ...

  10. android 学习随笔二十七(JNI:Java Native Interface,JAVA原生接口 )

    JNI(Java Native Interface,JAVA原生接口) 使用JNI可以使Java代码和其他语言写的代码(如C/C++代码)进行交互. 问:为什么要进行交互? 首先,Java语言提供的类 ...