带滚动条的表格

最新推荐文章于 2024-07-29 09:26:52 发布

_tsubasa_

最新推荐文章于 2024-07-29 09:26:52 发布

阅读量5.6k

点赞数 1

文章标签： html 表格滚动

本文链接：https://blog.csdn.net/mj158518/article/details/51990425

版权

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

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

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

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

示例代码如下：

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

效果如下：