一个不错的简单的表格样式,由于比较菜,有些是从网上“隔壁老王”那里抄来的,比较喜欢这个人的一些文章。
代码就这么多,html表格就免打了,因为表格标签不需要声明任何id或class了(除了第一行,即标题的设置class为fi_tr)。
<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)。
本文介绍了一种简单而美观的HTML表格样式实现方法,通过CSS对表格进行美化,并使用jQuery为表格添加交互效果,如鼠标悬停时改变背景色。
8164

被折叠的 条评论
为什么被折叠?



