# table css样式

- Link: https://yjyj.net/learn/6206.html
- Published: 2021-05-26T22:30:30+08:00
- Author: 小 虾

![file](https://yjyj.net/wp-content/uploads/2021/05/1622039363-image-1622039362288.
png)

    ```html
    <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>
            <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>
    ```

📚 【[招数学习](https://yjyj.net/category/learn)】专栏延伸阅读与热门精选（[全站文章归档](https://yjyj.net/archive)）：

 * [CentOS 7安装TCP BBR](https://yjyj.net/learn/centos/6204.html)
 * [node, npm 升级](https://yjyj.net/learn/centos/6202.html)
 * [甲骨文使用ssh登陆 – FinalShell](https://yjyj.net/learn/centos/6208.html)
 * [Ubuntu 开放指定端口](https://yjyj.net/learn/6209.html)
 * 热门必读[俩月了, DMIT 终于补货了!](https://yjyj.net/share/7795.html)
 * 热门必读[跨境电商 AI Prompts](https://yjyj.net/ad/7723.html)
