css+html 比较好看的表格

Original 2019-01-13 05:10:41 350
abstract:<head>    <title>表格</title>    <style type="text/css">        table        {        &n

<head>

    <title>表格</title>

    <style type="text/css">

        table

        {

            border-collapse: collapse;

            margin: 0 auto;

            text-align: center;

        }

        table td, table th

        {

            border: 1px solid #cad9ea;

            color: #666;

            height: 30px;

        }

        table thead th

        {

            background-color: #CCE8EB;

            width: 100px;

        }

        table tr:nth-child(odd)

        {

            background: #fff;

        }

        table tr:nth-child(even)

        {

            background: #F5FAFA;

        }

    </style>

</head>

<body>

    <table width="90%" class="table">

        <caption>

            <h2>

                车间能源消耗比例</h2>

        </caption>

        <thead>

            <tr>

                <th>

                    车间

                </th>

                <th>

                    产量

                </th>

                <th>

                    电量

                </th>

                <th>

                    单耗

                </th>

            </tr>

        </thead>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

        <tr>

            <td>

                109

            </td>

            <td>

                13

            </td>

            <td>

                1.34

            </td>

            <td>

                213

            </td>

        </tr>

    </table>

</body>

</html>

演示地址 -> http://47.107.64.136/CSS/3/

Correcting teacher:天蓬老师Correction time:2019-01-13 09:14:01
Teacher's summary:写得非常棒, 选择器用得也非常的优雅, 如果再用点单元格合并, 做的更复杂点更好

Release Notes

Popular Entries