HTML隔行变色

本文转载自查看原文 2020-04-29 00:47 895

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <link rel="stylesheet" type="text/css" href="css/style.css"/>
    </head>
    <body>
        <table   align="center">
            
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
            <tr>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
                <td>我是内容</td>
            </tr>
        </table>
        
    </body>
</html> css： 

    table{
                width: 600px;
                height: 300px;
                text-align: center;
                
            }
            table,td,tr{
                border: 1px solid black;
                border-collapse: collapse;
            }
            table tr:nth-child(odd){
                color: aqua;
            }
            table tr:nth-child(even){
                color: coral;
            }
            
            tr:hover td{
                color: #000000; 
            }

免责声明！

本站转载的文章为个人学习借鉴使用，本站对版权不负任何法律责任。如果侵犯了您的隐私权益，请联系本站邮箱yoyou2525@163.com删除。

猜您在找 jquery实现html表格隔行变色 HTML系列：js和css多种方式实现隔行变色 js实现隔行变色 WPF datagrid 如何隔行变色 antd 表格隔行变色纯 css 控制隔行变色 iview表格隔行变色 easyui datagrid 隔行变色 qt 设置qtablewidget隔行变色 JS实现表格隔行变色