<html>
<head>
<title>Table Style</title>
<style type="text/css">
.datalist {
border: 1px solid #0058a3; /* 表格边框 %%%%%%%%%%%%非常好的边框设置%%%%%%%%%*/
font-family: Arial;
border-collapse: collapse; /* 边框重叠 */
background-color: #eaf5ff; /* 表格背景色 %%%%%%%%%%%%%%%%% 非常好的背景颜色 %%%%%%%%%%%%% */
font-size: 14px;
table-layout: fixed;
word-wrap: break-word;
word-break: break-all;
500px;//固定表格宽度,不会撑大表格
}
.datalist caption {
padding-bottom: 5px;
font: bold 1.4em;
text-align: left;
}
.datalist th {
border: 1px solid #0058a3; /* 行名称边框 */
background-color: #4bacff; /* #c4e4ff #4bacff %%%%%%%%%%%%%%%%% 非常好的背景颜色 %%%%%%%%%%%%% 行名称背景色 */
color: #FFFFFF; /* 行名称颜色 */
font-weight: bold;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 12px;
padding-right: 12px;
text-align: center;
}
.datalist td {
border: 1px solid #0058a3; /* 单元格边框 */
text-align: left;
padding-top: 4px;
padding-bottom: 4px;
padding-left: 10px;
padding-right: 10px;
}
/*css控制隔行变色，注意：table的td标签不能有背景色，否则隔行变色失败*/
.datalist tr:nth-child(even) {background:#e1f2f9}
.datalist tr:nth-child(odd) {background: #cc9933}
.datalist tr.altrow {
background-color: #c4e4ff; /*非常好的背景颜色，动态变色*/
}
</style>
</head>
<body>
<table class="datalist">
<tr>
<th scope="col">Column1</th>
<th scope="col">Column2</th>
<th scope="col">Column3</th>
<th scope="col">Column4</th>
<th scope="col">Column5</th>
</tr>
<tr>
<td>abc</td>
<td>abc</td>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>abcfff</td>
<td>abcffff</td>
<td>aaaffff</td>
<td>bbbffff</td>
<td>cccffffcccffff</td>
</tr>
</table>
<!--注意JS代码一定要在table下面，不然JS效果无效-->
<script language="javascript">
<!--
var rows = document.getElementsByTagName('tr');
for (var i=0;i<rows.length;i++){
rows[i].onmouseover = function(){ //鼠标在行上面的时候
this.className += 'altrow';
}
rows[i].onmouseout = function(){ //鼠标离开时
this.className = this.className.replace('altrow','');
}
}
//-->
</script
</body>
</html