bootstrap4添加滚动条

最新推荐文章于 2025-10-13 10:23:38 发布

原创最新推荐文章于 2025-10-13 10:23:38 发布 · 5.1k 阅读

3 ·

CC 4.0 BY-SA版权

WEB前端专栏收录该内容

2 篇文章

订阅专栏

本文介绍了一种在网页开发中解决表格或列表元素过多导致页面空间占用过大的方法，通过添加滚动条来优化排版，提高用户体验。文章详细展示了如何使用HTML和CSS实现这一功能。

web开发中常常需要添加表格或者列表元素，但是如果元素内容过多就会占用太大的页面空间，不方便排版，所以滚动条的添加很重要。

                            <div class="col-md-6" style="margin: 0">
                                <!--<div class="row pre-scrollable">-->
                                    <table class="table table-hover">
                                        <thead>
                                        <tr>
                                            <th>词语</th>
                                            <th>数量</th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr><tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr><tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        <tr>
                                            <td>啊啊啊啊啊</td>
                                            <td>10</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                <!--</div>-->
                            </div>

以上这段代码的效果图为

如果将上述代码中的注释解开，即加上了

<div class="row pre-scrollable">

</div>

效果图就变成了这样

这样滚动条便添加成功了。