table样式

最新推荐文章于 2024-09-09 09:01:46 发布

普通打工仔

最新推荐文章于 2024-09-09 09:01:46 发布

阅读量131

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/sincool1003/article/details/86587990

table样式

一直以来，css和JS都是软肋，因为需要不得不重新温故。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        table.hovertable
        {    font-family: verdana,arial,sans-serif;
            font-size:11px;    color:#333333;
            border: 1px solid #C3DDE0;
            border-collapse: collapse;}
        table.hovertable th
        {    background-color:#F0F0F0;
            border-width: 1px;
            padding: 8px;
            border-width: 1px;
            border-style: solid;
            border-color: #C3DDE0;}
        table.hovertable tr
        {    background-color:#FFFFFF;
            border-width: 1px;
            border-style: solid;
            border-color: #C3DDE0;

        }
        table.hovertable.hover,table.hovertable tr.altrow
        {
           background-color:#d4e3e5 ;
        }
        table.hovertable td
        {    border-width: 1px;
            padding: 8px;    border-style: solid;    border-color: #C3DDE0;}

    </style>
    <script type="text/javascript" >
        window.onload = function () {
            var rows = document.getElementsByTagName("tr");
            for (var i=1; i<=rows.length;i++){
                rows[i].onmouseover=function(){
                    this.className +='altrow';//鼠标经过时，显示样式altrow
                }
                rows[i].onmouseout = function(){
                    this.className = this.className.replace('altrow','');//鼠标走的时候，显示样式清空
                }

            }

        }

    </script>
</head>
<body>
<table class="hovertable">
    <tr>
        <th>Info Header 1</th>
        <th>Info Header 2</th>
        <th>Info Header 3</th>
    </tr>
    <tr>
        <td>Item 1A</td>
        <td>Item 1B</td>
        <td>Item 1C</td>
    </tr>
    <tr>
        <td>Item 2A</td>
        <td>Item 2B</td>
        <td>Item 2C</td>
    </tr>
    <tr>
        <td>Item 3A</td>
        <td>Item 3B</td>
        <td>Item 3C</td>
    </tr>
    <tr>
        <td>Item 4A</td>
        <td>Item 4B</td>
        <td>Item 4C</td>
    </tr>
    <tr>
        <td>Item 5A</td>
        <td>Item 5B</td>
        <td>Item 5C</td>
    </tr>
</table>
</body>
</html>