带滚动条的表格

来源：互联网发布：js向上取整函数编辑：程序博客网时间：2024/04/23 16:35

有时候需要使用表格来展示一些数据，通常有两种方式：分页和全量。

全量展示时，如果数据量大，表格就会非常的长，视觉和使用效果都很差。

如果表格可以固定长度，内容可以上下滚动，且标题不动，这样看起来就好多了。

那么该如何实现呢？这里想到了一种方法，即表格内部再嵌入一个表格，内部固定高度，以达到滚动的效果。

示例代码如下：

<html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <style type="text/css">        table {            border: #888FEA 1px solid;            border-spacing: 0px;            text-align: center;        }        th, tr, td {            border: #888FEA 1px solid;        }        th {            background-color: #98AEFD;        }        #id {            width: 40px;        }        #c1 {            width: 150px;        }    </style></head><body>    <table style="width: 300px;">        <tr>            <th id="id">id</th>            <th id="c1">名称</th>            <th>数量</th>        </tr>        <tr>            <td colspan="3">                <div id="list" style="overflow-x: hidden; width: 100%; height: 120px;"> <!-- 这个是核心 -->                    <table style="margin: -2px -2px -2px -2px; width: 100%; border: 0px">                        <tr>                            <td id="id">1</td>                            <td id="c1">cat</td>                            <td>100</td>                        </tr>                        <tr>                            <td id="id">2</td>                            <td id="c1">dog</td>                            <td>200</td>                        </tr>                        <tr>                            <td id="id">3</td>                            <td id="c1">bird</td>                            <td>150</td>                        </tr>                        <tr>                            <td id="id">4</td>                            <td id="c1">mouse</td>                            <td>1000</td>                        </tr>                        <tr>                            <td id="id">5</td>                            <td id="c1">tiger</td>                            <td>1</td>                        </tr>                        <tr>                            <td id="id">6</td>                            <td id="c1">monkey</td>                            <td>3</td>                        </tr>                        <tr>                            <td id="id">7</td>                            <td id="c1">snake</td>                            <td>99</td>                        </tr>                        <tr>                            <td id="id">8</td>                            <td id="c1">flower</td>                            <td>999</td>                        </tr>                        <tr>                            <td id="id">9</td>                            <td id="c1">bug</td>                            <td>0</td>                        </tr>                    </table>                </div>            </td>        </tr>    </table></body></html>

效果如下：

有其他实现方式欢迎一起交流～

0 0