日期:2014-05-17  浏览次数:20886 次

css配合jquery设置表格样式
一个不错的简单的表格样式,由于比较菜,有些是从网上“隔壁老王”那里抄来的,比较喜欢这个人的一些文章。

<style type="text/css">	
table{
	width:640px;
	height:auto;
	border-style:solid;
	border-bottom-width:thin;
	margin:0 auto;
       table-layout:fixed;
       empty-cells:show; 
       border-collapse: collapse;
       margin:0 auto;
       font-size:14px;
       border:1px solid #cad9ea;
       color:#666;
}
/*第一行,标题样式,图片根据实际情况替换*/
.fi_tr{
	background:url(img/table_header.png);
	text-align:center;
	height:30px;
}
td{
	overflow:hidden;
	 height:25px;
	 border:1px solid #cad9ea;
   	 padding:0 1em 0;
}
/*设置鼠标在当前行的样式*/
tr:hover{
	background-color:#BFEDF9;
}
/*设置双数行的样式*/
.odd{
 background-color:#f5fafe;
}
</style>
<script type="text/javascript">
	$(document).ready(function(){	
	   //设置双数行的样式
	    $("tr:even").addClass("odd");	
	});//jquery结束
</script>


代码就这么多,html表格就免打了,因为表格标签不需要声明任何id或class了(除了第一行,即标题的设置class为fi_tr)。