文档章节

CSS简单表格样式

秦学强
 秦学强
发布于 2017/07/09 22:04
字数 877
阅读 6
收藏 0
点赞 0
评论 0

1. 单像素边框CSS表格

这是一个很常用的表格样式。


源代码:

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.gridtable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #666666;
	border-collapse: collapse;
}
table.gridtable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #dedede;
}
table.gridtable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #666666;
	background-color: #ffffff;
}
</style>

<!-- Table goes in the document BODY -->
<table class="gridtable">
<tr>
	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

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

和上面差不多,不过每个格子里多了背景图。


cell-blue.jpg

cell-grey.jpg

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

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

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.imagetable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.imagetable th {
	background:#b5cfd2 url('cell-blue.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
}
table.imagetable td {
	background:#dcddc0 url('cell-grey.jpg');
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #999999;
}
</style>

<!-- Table goes in the document BODY -->
<table class="imagetable">
<tr>
	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</table>

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

这个CSS样式表格自动切换每一行的颜色,在我们需要频繁更新一个大表格的时候很有用。


代码:

<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
	if(document.getElementsByTagName){  
		
		var table = document.getElementById(id);  
		var rows = table.getElementsByTagName("tr"); 
		 
		for(i = 0; i < rows.length; i++){          
			if(i % 2 == 0){
				rows[i].className = "evenrowcolor";
			}else{
				rows[i].className = "oddrowcolor";
			}      
		}
	}
}

window.onload=function(){
	altRows('alternatecolor');
}
</script>


<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #a9c6c9;
	border-collapse: collapse;
}
table.altrowstable th {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.altrowstable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
.oddrowcolor{
	background-color:#d4e3e5;
}
.evenrowcolor{
	background-color:#c3dde0;
}
</style>


<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr>
	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
	<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
	<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
	<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
	<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
	<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>

<!--  The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->

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

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


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

<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.hovertable {
	font-family: verdana,arial,sans-serif;
	font-size:11px;
	color:#333333;
	border-width: 1px;
	border-color: #999999;
	border-collapse: collapse;
}
table.hovertable th {
	background-color:#c3dde0;
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
table.hovertable tr {
	background-color:#d4e3e5;
}
table.hovertable td {
	border-width: 1px;
	padding: 8px;
	border-style: solid;
	border-color: #a9c6c9;
}
</style>

<!-- Table goes in the document BODY -->
<table class="hovertable">
<tr>
	<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
	<td>Item 1A</td><td>Item 1B</td><td>Item 1C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
	<td>Item 2A</td><td>Item 2B</td><td>Item 2C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
	<td>Item 3A</td><td>Item 3B</td><td>Item 3C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
	<td>Item 4A</td><td>Item 4B</td><td>Item 4C</td>
</tr>
<tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';">
	<td>Item 5A</td><td>Item 5B</td><td>Item 5C</td>
</tr>
</table>


本文转载自:http://blog.csdn.net/u014481096/article/details/44196447

共有 人打赏支持
秦学强

秦学强

粉丝 0
博文 69
码字总数 0
作品 0
海淀
程序员
50款CSS工具:网格和布局工具,CSS 优化工具….

so good! 转自:http://www.alibuybuy.com/9042.html 50款CSS工具,包含,CSS网格和布局工具,CSS 优化工具,CSS 菜单生成工具,CSS 按钮生成器,CSS 圆角生成器,CSS 框架,CSS Sprites生成...

晨曦之光
2012/03/09
0
0
Bootstrap中的面板

面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ...

9秒教育
2015/11/30
24
0
Bootstrap中的面板

面板 面板(Panels)是Bootstrap框架新增的一个组件,其主要作用就是用来处理一些其他组件无法完成的功能。同样在不同的版本中具有不同的源码: ☑ Less版本:对应的源码文件是 panels.less ...

9秒教育
2015/11/30
54
0
chromatable.js源码简单阅读一个jquery插件

chromatable.js实现了一个表格表头固定,表格体滚动的效果. 今天找到的纯html解决方案:建立两个表格,一个表格放表头的信息,一个表格使用div包装起来,div中加上滚动样式;这样就实现了上面的效果...

乔康007
2013/03/26
0
0
清晨de阳光/jquery-xjzTable

#jquery-xjzTable 一个功能强大且简单易用的表格插件. 演示地址:http://null7200252.oschina.io/jquery-xjztable/doc/ 特点: 支持分页、分页信息、分页大小 支持ajax数据源、本地数据源 支持...

清晨de阳光
2016/11/04
0
0
jQuery 的表格插件--jQuery-xjzTable

一个功能强大且简单易用的表格插件. 特点: 支持分页、分页信息、分页大小 支持ajax数据源、本地数据源 支持排序 单元格鼠标悬停浮动tooltip 自定义单元格内容渲染 精准控制dom生成 回调函数...

清晨de阳光
2016/10/17
622
0
精选30个优秀的CSS技术和实例

收集精选了30个使用纯CSS完成的强大实践的优秀CSS技术和实例,您将在这里发现很多与众不同的技术,比如:图片集、阴影效果、可扩展按钮、菜单等…这些实例都是使用纯CSS和HTML实现的。 单击每...

晨曦之光
2012/03/09
0
0
960 Grid System 简明使用教程

960 Grid System(960gs)是一个为了简化webUI设计工作流程而出现的宽度为960像素的工具。它包含两个版本,12列和16列,这两个版本可以单独使用也可以放一起使用。 960gs样式说明: container_...

i33
2012/04/26
0
0
端程序员入门所要学习的16个知识点

1、HTML常用标签 语言是什么 、Web前端开发语言、 HTML超文本标记语言 、 网页主体结构 、常用标签、超链接(a标签)、Img图片标签 2、盒子模型 初探Div盒子模型 、css样式、 简单css样式、盒...

急速奔跑中的蜗牛
06/07
0
0
Datatables快速入门开发--一款好用的JQuery表格插件

  博主是一个java后端程序员,前端技术会用但不精通,做后台的一些功能经常要涉及表格的展示,分页,搜索,排序等等一系列功能,在经历了一段时间的原始手段,开始接触并使用Datatables,一个jquer...

冬至饮雪
2017/08/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Spring Cloud云服务 - HongHu架构common-service 项目构建过程

上一篇我们介绍了《整合spring cloud云服务架构 - HongHu云架构common-service代码结构分析》,本节我们将对common-service整个项目进行剖析,将整个构建的流程给记录下来,让更多的关注者来...

itcloud
9分钟前
0
0
Connection reset

在使用HttpClient调用后台resetful服务时,“Connection reset”是一个比较常见的问题,有同学跟我私信说被这个问题困扰很久了,今天就来分析下,希望能帮到大家。例如我们线上的网关日志就会...

夜黑人模糊灬
14分钟前
0
0
如何写PHP规范注释

所有的文档标记都是在每一行的 * 后面以@开头。如果在一段话的中间出来@的标记,这个标记将会被当做普通内容而被忽略掉。 @access 该标记用于指明关键字的存取权限:private、public或prote...

度_
14分钟前
0
0
influxDB Ppostgis

PostGis 1.需要安装postgreSQL,postgis作为插件嵌入到postgreSQL中; 2.使用zip包直接安装,需要修改 makepostgisdb_using_extensions.bat文件中的路径,用户名,密码,然后直接运行; 3.没有...

courtzjl
18分钟前
0
0
多线程Thread-多线程顺序执行

需求:现在有两个任务,任务1和任务2,任务1中有多个线程,并且任务2必须等任务1完成后才能执行。 namespace TThread{ class Program { static void Main(string[] ar...

kaixinguo314
22分钟前
1
0
直播总结

https://blog.csdn.net/weiyuefei/article/details/70257616 视频: 上传服务,转码服务,视频一致性MD5 视频转码技术及转码实现详解 https://wenku.baidu.com/view/32702108844769eae009eda...

素雷
24分钟前
0
0
Linux系统-tcpdump常用抓包命令

序言 单独总结tcpdump抓包的常用命令 主要语法 过滤主机/IP: tcpdump -i eth1 host 172.16.7.206 抓取所有经过网卡1,目的IP为172.16.7.206的网络数据 过滤端口: tcpdump -i eth1 dst port...

MrBoyce
25分钟前
0
0
274. H-Index - LeetCode

Question 274. H-Index Solution 题目大意: 论文里的 h 因子判定,题目的意思可能有点晦涩。h 因子是评判学术成就的一种重要方法,h 因子越高越好,h 因子兼顾研究学术人员的学术产出数量与...

yysue
29分钟前
0
0
 Unable to read class [com.mrp.action.BaseAction]

struts2启动时,出现的 Unable to read class [com.mrp.action.BaseAction] java.lang.NoClassDefFoundError: com/opensymphony/xwork2/util/finder/DefaultClassFinder$InfoBuildingVisito......

uug
30分钟前
0
0
分发系统介绍&expect脚本远程登录&expect脚本远程执行命令&expect脚本传递参数

20.27 分发系统介绍 应用场景 企业中随之业务的逐渐增大,后端所使用的编程语言是php,系统为LAMP/LNMP架构,需要将代码上传到服务器中;代码会不断的迭代,这就需要在业务服务器上更新代码,...

影夜Linux
32分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部