這篇文章主要介紹了關(guān)于html' target='_blank'>HTML頁面table滾動條的實現(xiàn) ，有著一定的參考價值，現(xiàn)在分享給大家，有需要的朋友可以參考一下

有很多頁面由于數(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; 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列寬自適應(yīng) 4.table內(nèi)容不換行 /h4  p >

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

相關(guān)推薦：

HTML頁面原生VIDEO標(biāo)簽隱藏下載按鈕功能

實現(xiàn)在HTML頁面加載完畢后運(yùn)行js方法

以上就是HTML頁面table滾動條的實現(xiàn) 的詳細(xì)內(nèi)容，html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。