HTML頁(yè)面table滾動(dòng)條的實(shí)現(xiàn)

1、html頁(yè)面table滾動(dòng)條的實(shí)現(xiàn)tablescrollbar&headerfixed有無(wú)數(shù)頁(yè)面因?yàn)閿?shù)據(jù)量過(guò)大，會(huì)產(chǎn)生橫縱滾動(dòng)條。為了便于用法者觀察，我們要把表頭固定一下。按照這個(gè)需求寫(xiě)了個(gè)demo來(lái)實(shí)現(xiàn)這個(gè)功能。主要解決了幾點(diǎn)問(wèn)題：1.table實(shí)現(xiàn)橫縱滾動(dòng)條2.table表頭固定3.table列寬自適應(yīng)4.table內(nèi)容不換行主要代碼塊css：.table-scrollwidth:calc(100%-5px);overflow-x:scroll;white-space:nowrap;.table-scrolltabletable-layout:fixed;width:cal

2、c(100%-10px);background-color:darkseagreen;.table-scrolltheaddisplay:table-row;background-color:bisque;.table-scrolltbodyoverflow-y:scroll;overflow-x:hidden;display:block;height:calc(100vh-300px);.table-scrollth,tdwidth:160px;overflow:hidden;text-overflow:ellipsis;min-width:160px;border:1pxsolid8080

3、80;h4,h5color:cornflowerblue;js：$(function()$(&39;.table-scroll&39;).scroll(function()$(&39;.table-scrolltable&39;).width($(&39;.table-scroll&39;).width()+$(&39;.table-scroll&39;).scrollleft(););vartabletdwidths=newarray();vartablewidth=0;vartabletr0width=0;vartableth

4、num=0;vartabletr1width=0;tablewidth=$(&39;.table-scrolltable&39;).css(&39;width&39;).replace(&39;px&39;,&39;&39;);tablethnum=$(&39;.table-scrolltr:eq(0)&39;).children(&39;th&39;).length;if($(&39;.table-scrolltr&39;).length=1)/headeronlyif(table

5、width>tabletr0width)$(&39;.table-scrolltr:eq(0)&39;).children(&39;th&39;).each(function(i)$(this).width(parseint($(this).css(&39;width&39;).replace(&39;px&39;,&39;&39;)+parseint(math.floor(tablewidth-tabletr0width)/tablethnum)+&39;px&39;););else/hea

6、derandbodytabletr1width=$(&39;.table-scrolltr:eq(1)&39;).css(&39;width&39;).replace(&39;px&39;,&39;&39;);$(&39;.table-scrolltr:eq(1)&39;).children(&39;td&39;).each(function(i)tabletdwidthsi=$(this).css(&39;width&39;).replace(&39;px&39;,

7、&39;&39;););$(&39;.table-scrolltr:eq(0)&39;).children(&39;th&39;).each(function(i)if(parseint($(this).css(&39;width&39;).replace(&39;px&39;,&39;&39;)>parseint(tabletdwidthsi)tabletdwidthsi=$(this).css(&39;width&39;).replace(&39;px&39

8、;,&39;&39;););if(tablewidth>tabletr1width)/setallthtdwidth$(&39;.table-scrolltr&39;).each(function(i)$(this).children().each(function(j)$(this).css(&39;min-width&39;,(parseint(tabletdwidthsj)+parseint(math.floor(tablewidth-tabletr1width)/tablethnum)+&39;px&39;););)

9、;else/method1:setallthtdwidth$(&39;.table-scrolltr&39;).each(function(i)$(this).children().each(function(j)$(this).css(&39;min-width&39;,tabletdwidthsj+&39;px&39;););););html：完成效果：1.固定表頭2.table橫縱滾動(dòng)條3.table列寬自適應(yīng)4.table內(nèi)容不換行title1title1title1title1title1title1title1title1title1

10、title1title1title1title1title1title1title11body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body12body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body13body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body14body1body1body

11、1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body15body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body16body1body1body1body1body1body1body1body1body1body1bo

12、dy1body1body1body1body1body17body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body18body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body19body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body110body1body1body1body1body1bo

13、dy1body1body1body1body1body1body1body1body1body1body111body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body112body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body113body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body11

14、4body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body115body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body116body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body117body1body1body1body1body1body1body1body1body1body1bod

15、y1body1body1body1body1body118body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body119body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body120body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body121body1body1body1body1body1

16、body1body1body1body1body1body1body1body1body1body1body122body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body123body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body124body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body

17、125body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body126body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body127body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body128body1body1body1body1body1body1body1body1body1body1body1body1body1body1body1body128body1body1body1body1body1body1body1body1body1bod