明辉手游网中心：是一个免费提供流行视频软件教程、在线学习分享的学习平台！

文章发布
全站
软 件 文 章
热门搜索：喜欢 朋友 K歌 手机酷狗 电台 搜索 
资讯首页腾讯视频 爱奇艺 暴风影音 酷狗音乐 酷我音乐影音大全软件下载软件教程电脑系统下载
聊天工具办公软件杀毒教程系统工具图形图像电脑学习应用软件网络软件苹果应用注册码网站教程技术开发安卓教程其它教程
您当前所在位置：网视手游站 -> 网站教程 -> HTML页面table滚动条的完成

HTML页面table滚动条的完成

发表时间：2023-09-10 来源：明辉站整理相关软件相关文章人气：

[摘要]这篇文章主要介绍了关于HTML页面table滚动条的实现 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下table scrollbar & header fixed有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个dem...

这篇文章主要介绍了关于HTML页面table滚动条的实现 ，有着一定的参考价值，现在分享给大家，有需要的朋友可以参考一下

table scrollbar & header fixed

有很多页面由于数据量过大，会产生横纵滚动条。为了便于使用者观看，我们要把表头固定一下。根据这个需求写了个demo来实现这个功能。

  • 主要解决了几点问题：

  • 1.table实现横纵滚动条

  • 2.table表头固定

  • 3.table列宽自适应

  • 4.table内容不换行

主要代码块

css：

            .table-scroll {
                width: calc(100% - 5px);
                overflow-x: scroll;
                white-space: nowrap;
            }

            .table-scroll table {
                table-layout: fixed;
                width: calc(100% - 10px);
                background-color:darkseagreen ;
            }

            .table-scroll thead {
                display: table-row;
                background-color: bisque;
            }

            .table-scroll tbody {
                overflow-y: scroll;
                overflow-x: hidden;
                display: block;
                height: calc(100vh - 300px);
            }

            .table-scroll th,td {
                width: 160px;
                overflow: hidden;
                text-overflow: ellipsis;
                min-width: 160px;
                border: 1px solid #808080;
            }

            h4, h5 {
                color: cornflowerblue;
            }

js：

    $(function() {
            $('.table-scroll').scroll(function() {
                  $('.table-scroll table').width($('.table-scroll').width() 
                  + $('.table-scroll').scrollLeft());
                });

                var tableTdWidths = new Array();
            var tableWidth = 0;
            var tableTr0Width = 0;
            var tableThNum = 0;
            var tableTr1Width = 0;

                tableWidth = $('.table-scroll table').css('width').replace('px','');
                tableThNum = $('.table-scroll tr:eq(0)').children('th').length;            if ($('.table-scroll tr').length == 1) { // header only                if (tableWidth > tableTr0Width) {
                    $('.table-scroll tr:eq(0)').children('th').each(function(i){
                        $(this).width(parseInt(($(this).css('width').replace('px','')) 
                        + parseInt(Math.floor((tableWidth - tableTr0Width) / tableThNum))) + 'px');
                    });
                }
            } else { // header and body
                tableTr1Width = $('.table-scroll tr:eq(1)').css('width').replace('px','');
                    $('.table-scroll tr:eq(1)').children('td').each(function(i){
                    tableTdWidths[i]=$(this).css('width').replace('px','');
                });
                $('.table-scroll tr:eq(0)').children('th').each(function(i) {            if(parseInt($(this).css('width').replace('px', '')) >
                parseInt(tableTdWidths[i])) {
                tableTdWidths[i] = $(this).css('width').replace('px','');
                    }
                });                if (tableWidth > tableTr1Width) {
                    //set all th td width
                    $('.table-scroll tr').each(function(i){
                            $(this).children().each(function(j){
                                $(this).css('min-width',(parseInt(tableTdWidths[j]) 
                                + parseInt(Math.floor((tableWidth - tableTr1Width) / 
                                tableThNum))) + 'px');
                            });
                    });
                } else {
                    //method 1 : set all th td width
                    $('.table-scroll tr').each(function(i){
                            $(this).children().each(function(j){
                                $(this).css('min-width',tableTdWidths[j] + 'px');
                            });
                    });
                }
            }
            });

html：

    <body>
        <h4>完成效果：1.固定表头 2.table横纵滚动条 3.table列宽自适应 4.table内容不换行</h4>
        <p class="table-scroll">
            <table>
                <thead>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                    <th>title1</th>
                </thead>
                <tbody>
                    <tr>
                        <td>1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>2</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>3</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>4</td>
                        <td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>5</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>6</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>7</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>8</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>9</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>10</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>11</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>12</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>13</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>14</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>15</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>16</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>17</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>18</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>19</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>20</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>21</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>22</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>23</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>24</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>25</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>26</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>27</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>28</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>28</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>29</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                    <tr>
                        <td>30</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                        <td>body1</td>
                    </tr>
                </tbody>
            </table>
        </p>
    </body>

网上也有很多的例子，但是实现的效果不是想要的，自己工作需要做了一下，画面不好看，重点看效果，如有问题请指正！

相关推荐：

HTML页面原生VIDEO标签隐藏下载按钮功能

实现在HTML页面加载完毕后运行js方法

以上就是HTML页面table滚动条的实现 的详细内容，更多请关注php中文网其它相关文章！


网站建设是一个广义的术语，涵盖了许多不同的技能和学科中所使用的生产和维护的网站。




标签：HTML页面table滚动条的完成 

推荐资讯 总人气榜

最新教程 本月人气

联系我们|版权声明|下载帮助|关于我们|网站地图|手机站
Copyright © 2015-2020 www.22122511.com AllRights Reserved

本站资源均来自互联网收集 如有侵犯到您利益的地方请及时联系管理删除，敬请见谅!