表格美化.

IT00123

已于 2022-07-14 15:43:02 修改

阅读量281

点赞数 2

文章标签： html 前端

于 2022-07-14 13:40:00 首次发布

本文链接：https://blog.csdn.net/IT00123/article/details/125782160

版权

整体代码

<style>
    table {
        border: 1px solid gainsboro;
        border-collapse: collapse;
        /*合并外边框的间距*/
        width: 800px;
        text-align: center;
    }
    
    th,
    td {
        border: 1px solid gainsboro;
    }
    
    thead tr {
        background-color: black;
        color: white;
        height: 35px;
    }
    
    tbody tr:nth-child(odd) {
        background-color: antiquewhite;
        /*odd 单数 even 双数*/
    }
    
    tbody tr:nth-child(even):hover {
        background-color: red;
        cursor: pointer;
        /*鼠标变手*/
    }
</style>

<body>
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>商品名称</th>
                <th>单价/元</th>
                <th>数量</th>
                <th>商品名称</th>
                <th>单价/元</th>
                <th>数量</th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>1</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>
            </tr>
            <tr>
                <td>2</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>
            </tr>
            <tr>
                <td>3</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>

            </tr>
            <tr>
                <td>4</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>

            </tr>
            <tr>
                <td>5</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>
                <td>显示器</td>
                <td>1000</td <td>20</td>
                <td>19</td>

            </tr>



        </tbody>

    </table>