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

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

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

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

• 主要解決了幾點問題：

• 1.table實現(xiàn)橫縱滾動條

• 2.table表頭固定

• 3.table列寬自適應

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

<body>
        <h5>完成效果：1.固定表頭 2.table橫縱滾動條 3.table列寬自適應 4.table內(nèi)容不換行</h5>
        <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>

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

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

網(wǎng)站名稱：HTML頁面如何實現(xiàn)table滾動條-創(chuàng)新互聯(lián)
網(wǎng)站鏈接：http://muchs.cn/article40/dsipeo.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站收錄、電子商務、Google、做網(wǎng)站、外貿(mào)建站、企業(yè)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)