Customize table borders through html and css


<!DOCTYPE html>
    <head>
        <meta charset="utf-8"/>
        <style type="text/css">
            td {
    
    	/*画出整个表格的上线和左线*/
                border-top: 1px solid #666;
                border-left: 1px solid #666;
            }
            table {
    
    	/*画出整个表格的右线和底线*/
                border-right: 1px solid #666;
                border-bottom: 1px solid #666;
            }
            tr:nth-child(odd) {
    
    
                background: white;
            }
            tr:nth-child(even) {
    
    
                background: gray;
            }
            tr:hover {
    
    
                background: #267dcc;
            }
        </style>
    </head>
    <body>
        <table cellspacing="0">
        <tr>
            <td>row 1, cell 1</td>
            <td>row 1, cell 2</td>
        </tr>
        <tr>
            <td>row 2, cell 1</td>
            <td>row 2, cell 2</td>
        </tr>
        <tr>
            <td>row 3, cell 1</td>
            <td>row 3, cell 2</td>
        </tr>
        <tr>
            <td>row 4, cell 1</td>
            <td>row 4, cell 2</td>
        </tr>
        </table>
    </body>
</html>

Guess you like

Origin blog.csdn.net/tianxiefenxiang/article/details/106792165
Recommended