HTML頁(yè)面table滾動(dòng)條的實(shí)現(xiàn)_第1頁(yè)
已閱讀5頁(yè)，還剩50頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎ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

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論