原生js 创建表格

最新推荐文章于 2024-05-16 16:52:30 发布

逆风优雅

最新推荐文章于 2024-05-16 16:52:30 发布

阅读量466

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/qq_44603011/article/details/126018384

版权

电力设施故障统计停电次数变压器数据分析

关键词由CSDN通过智能技术生成

js 专栏收录该内容

65 篇文章 1 订阅

订阅专栏

                        <table class="table-title" cellspacing="0" cellpadding="0" border="0">
                            <colgroup>
                                <col style="width:10%"/>
                                <col style="width:15%"/>
                                <col style="width:10%"/>
                                <col style="width:8%"/>
                            </colgroup>
                            <thead>
                                <tr>
                                    <td>户名</td>
                                    <td>地址</td>
                                    <td>所属变压器</td>
                                    <td>停电次数</td>
                                </tr>
                            </thead>
                        </table>
                       <table class="table-body" cellspacing="0" cellpadding="0" border="0">
                            <colgroup>
                                <col style="width:10%"/>
                                <col style="width:15%"/>
                                <col style="width:10%"/>
                                <col style="width:8%"/>
                            </colgroup>
                            <tbody>
                                <tr>
                                    <td>9100096858</td>
                                    <td>莲花街坊13幢305室</td>
                                    <td>台区变压器1</td>
                                    <td>125</td>
                                </tr>
                                <tr>
                                    <td>9100096858</td>
                                    <td>莲花街坊13幢305室</td>
                                    <td>台区变压器1</td>
                                    <td>125</td>
                                </tr>
                                <tr>
                                    <td>9100096858</td>
                                    <td>莲花街坊13幢305室</td>
                                    <td>台区变压器1</td>
                                    <td>125</td>
                                </tr>
                                <tr>
                                    <td>9100096858</td>
                                    <td>莲花街坊13幢305室</td>
                                    <td>台区变压器1</td>
                                    <td>125</td>
                                </tr>
                            </tbody>
                       </table>

首页先写个表头：

此处用了两个table,第一个为了实现数据太多，当出现滚动条的时候，表头也跟这滚动

                           <colgroup>
                                <col style="width:10%"/>
                                <col style="width:15%"/>
                                <col style="width:10%"/>
                                <col style="width:8%"/>
                            </colgroup>

colgroup的目的是，实现表头和表格内容间距一致