好看的表格样式 

<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;
            width: 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

 

posted @ 2013-07-25 17:16  jshaibozhong  阅读(2394)  评论(0)    收藏  举报