HTML頁面如何實現(xiàn)table滾動條-創(chuàng)新互聯(lián)

小編給大家分享一下HTML頁面如何實現(xiàn)table滾動條，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

十年的禮縣網(wǎng)站建設(shè)經(jīng)驗，針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù)，響應(yīng)快，48小時及時工作處理。成都全網(wǎng)營銷的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同，自動調(diào)整禮縣建站的顯示方式，使網(wǎng)站能夠適用不同顯示終端，在瀏覽器中調(diào)整網(wǎng)站的寬度，無論在任何一種瀏覽器上瀏覽網(wǎng)站，都能展現(xiàn)優(yōu)雅布局與設(shè)計，從而大程度地提升瀏覽體驗。成都創(chuàng)新互聯(lián)公司從事“禮縣網(wǎng)站設(shè)計”,“禮縣網(wǎng)站推廣”以來，每個客戶項目都認(rèn)真落實執(zhí)行。table scrollbar & header fixed

有很多頁面由于數(shù)據(jù)量過大，會產(chǎn)生橫縱滾動條。為了便于使用者觀看，我們要把表頭固定一下。根據(jù)這個需求寫了個demo來實現(xiàn)這個功能。

主要解決了幾點問題：
1.table實現(xiàn)橫縱滾動條
2.table表頭固定
3.table列寬自適應(yīng)
4.table內(nèi)容不換行

主要代碼塊

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

            h5, h6 {
                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：

完成效果：1.固定表頭 2.table橫縱滾動條 3.table列寬自適應(yīng) 4.table內(nèi)容不換行

title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1	title1
1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
2	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
3	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
4	body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1	body1	body1	body1	body1	body1 body1 body1 body1 body1 body1 body1 body1 body1 body1 body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
5	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
6	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
7	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
8	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
9	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
10	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
11	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
12	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
13	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
14	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
15	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
16	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
17	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
18	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
19	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
20	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
21	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
22	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
23	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
24	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
25	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
26	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
27	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
28	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
28	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
29	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1
30	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1	body1

網(wǎng)上也有很多的例子，但是實現(xiàn)的效果不是想要的，自己工作需要做了一下，畫面不好看，重點看效果，如有問題請指正！

看完了這篇文章，相信你對HTML頁面如何實現(xiàn)table滾動條有了一定的了解，想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站制作公司行業(yè)資訊頻道，感謝各位的閱讀！

當(dāng)前題目：HTML頁面如何實現(xiàn)table滾動條-創(chuàng)新互聯(lián)
文章鏈接：http://weahome.cn/article/dsipeo.html

真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

HTML頁面如何實現(xiàn)table滾動條-創(chuàng)新互聯(lián)

完成效果：1.固定表頭 2.table橫縱滾動條 3.table列寬自適應(yīng) 4.table內(nèi)容不換行

其他資訊

網(wǎng)站制作

企業(yè)服務(wù)

網(wǎng)站建設(shè)

服務(wù)器托管