我是如何做固定頭部(thead)的

crossea 發(fā)布于2019-08-20 14:50 / 2497人閱讀

摘要：我希望就用一個(gè)，盡可能的減少輔助節(jié)點(diǎn)，把這個(gè)事情搞定模擬我們嘗試給加上，再指定，然后這個(gè)就脫離的文檔流，固定在頁(yè)面頂部顯示了，還好，所有支持的瀏覽器都表現(xiàn)一致，就連也生效了。但是，使用或后，原本所占的高度就沒(méi)有了，因?yàn)槊撾x了文檔流。

在前端開(kāi)發(fā)中經(jīng)常遇到需要頁(yè)面滾動(dòng)時(shí)，固定某個(gè)區(qū)域顯示，常見(jiàn)表格的需求，因?yàn)楸砀裼泻芏嗔校绻忻还潭ㄔ陧敳匡@示，滾動(dòng)到底部時(shí)，可能就不知道某些列對(duì)應(yīng)的是什么了

那我們就聊一下如何在滾動(dòng)時(shí)固定(thead)，讓它始終顯示在列表的上方

css的方案 如何讓tbody滾動(dòng)

如果我們用css來(lái)實(shí)現(xiàn)，網(wǎng)上常見(jiàn)的一種方案是給tobdy一個(gè)固定高度，然后讓它滾動(dòng)，這樣就實(shí)現(xiàn)了滾動(dòng)列表時(shí)，thead不動(dòng)。

有同學(xué)說(shuō)tbody沒(méi)辦法滾動(dòng)，所以網(wǎng)上也有用div來(lái)拼表格的，這樣就容易滾動(dòng)了。其實(shí)tbody也可以滾動(dòng)的，比如tbody{display:block} 這樣列的寬度就需要用css來(lái)控制了，總之是可以達(dá)到的。

這個(gè)方案的缺點(diǎn)在于，頁(yè)面上有很多滾動(dòng)條，tbody的，頁(yè)面的。雖然該方案易實(shí)施，但在視覺(jué)設(shè)計(jì)師那里通常是不能忍受的。

使用sticky屬性

現(xiàn)在css里有一個(gè)position:sticky屬性，正好可以實(shí)現(xiàn)該需求，我們只需要給thead加上position:sticky即可。關(guān)于sticky的瀏覽器支持可以看這里 http://caniuse.com/#search=st...

這里有一個(gè)坑的地方，給thead的position指定sticky，chrome、safari都可以支持，唯獨(dú)firefox是不行的，也就是寫(xiě)上后沒(méi)有任何效果

那么對(duì)于不支持sticky的，我們只能再想解決方案了

js的方案

這里的js方案還是用css來(lái)實(shí)施的，只是這個(gè)過(guò)程中加入了js控制

別人的方案

上下2個(gè)table
js加載后，把當(dāng)前表格分成上下2個(gè)table，上table只顯示thead，下table只顯示tbody。

這個(gè)略顯麻煩

再克隆一個(gè)thead出來(lái)

這個(gè)對(duì)于原有thead上已經(jīng)綁定了事件，對(duì)于克隆后的也要做處理，也很麻煩。

我希望就用一個(gè)thead，盡可能的減少輔助節(jié)點(diǎn)，把這個(gè)事情搞定

fixed+absolute模擬sticky

我們嘗試給thead加上position:fixed，再指定top:0，然后這個(gè)thead就脫離的文檔流，固定在頁(yè)面頂部顯示了，還好，所有支持fixed的瀏覽器都表現(xiàn)一致，就連firefox也生效了。

這時(shí)候帶來(lái)的另外問(wèn)題就是thead脫離文檔流后，thead里面的列的寬度就失效了，也就是thead中的列名稱和tbody里面的列寬度不一致。

這時(shí)候想到的方案就是通過(guò)計(jì)算tbody中的列寬度，然后同步給thead中的列，這樣就能對(duì)上了。
但是表格的thead并不是上來(lái)就是fixed效果的，而是隨著滾動(dòng)條的滾動(dòng)，當(dāng)它處于頁(yè)面頂部時(shí)才進(jìn)行fixed效果。即thead的position會(huì)在static與fixed之間進(jìn)行切換。

這樣子看上去問(wèn)題就解決了，但是在某些情況下，static與fixed進(jìn)行切換時(shí)，前后的列寬度并不一樣，比如static時(shí)，某一列是40px的寬度，但是fixed后，通過(guò)計(jì)算tbody對(duì)應(yīng)列的寬度，它變成38了，雖然切換前后thead中的列與tbody中的列寬度仍然是一致的，但是在切換過(guò)程中這種寬度的變化導(dǎo)致表格會(huì)有一些讓人不舒服的變化，對(duì)于我是不能忍的。

既然thead在文檔流中和不在文檔流中，tbody表現(xiàn)并不一致，那我們干脆直接讓thead脫離文檔流好了，該如何脫離呢，給它position:absolute，絕對(duì)定位，然后不給left top值，這樣它還在原來(lái)的位置，就是不占高度了，這時(shí)候我們?nèi)匀挥?jì)算tbody中的每一列的寬度，給到thead中的列。然后在absolute與fixed之間進(jìn)行切換時(shí)，也不會(huì)有任何寬度變化了。

但是，使用absolute或fixed后，原本thead所占的高度就沒(méi)有了，因?yàn)槊撾x了文檔流。這時(shí)候整個(gè)效果還是不對(duì)的，我們要想個(gè)辦法，找個(gè)節(jié)點(diǎn)占著原來(lái)thead的高度，這樣才完美。

我最終找了caption標(biāo)簽，然后把thead的高度給到caption。這樣就可以了