美文网首页
2018-09-03用CSS实现表格样式

2018-09-03用CSS实现表格样式

作者: 菩灵 | 来源:发表于2018-09-03 16:57 被阅读37次

    用CSS实现的表格样式:
    代码奉上:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>表格样式</title>
        <style type="text/css">
            .goods_list{
                width: 600px;
                height: 200px;
                border: 1px solid #333;
                border-collapse: collapse;
                font-family: "Microsoft Yahei"
            }
            .goods_list th,.goods_list td{
                border: 1px solid #333;
                text-align: center;
            }
            .goods_list th{
                background-color: #3366cc;
                color: #fff;
            }
    
        </style>
    </head>
    <body>
        <table class="goods_list">
            <tr>
                <th>序号</th>
                <th>名称</th>
                <th>数量</th>
                <th>价格</th>
                <th>备注</th>
            </tr>
            <tr>
                <td>1</td>
                <td>苹果</td>
                <td>1000</td>
                <td>¥5.00</td>
                <td>销售中</td>
            </tr>
            <tr>
                <td>2</td>
                <td>苹果</td>
                <td>1000</td>
                <td>¥5.00</td>
                <td>销售中</td>
            </tr>       
            <tr>
                <td>3</td>
                <td>苹果</td>
                <td>1000</td>
                <td>¥5.00</td>
                <td>销售中</td>
    
            </tr>
                    <tr>
                <td>4</td>
                <td>苹果</td>
                <td>1000</td>
                <td>¥5.00</td>
                <td>销售中</td>
            </tr>
        </table>
    </body>
    </html>
    

    效果:


    CSS实现表格样式

    相关文章

      网友评论

          本文标题:2018-09-03用CSS实现表格样式

          本文链接:https://www.haomeiwen.com/subject/bgkiwftx.html