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實現表格隔行變色