資訊專欄INFORMATION COLUMN
摘要：我希望就用一個，盡可能的減少輔助節(jié)點，把這個事情搞定模擬我們嘗試給加上，再指定，然后這個就脫離的文檔流，固定在頁面頂部顯示了，還好，所有支持的瀏覽器都表現(xiàn)一致，就連也生效了。但是，使用或后，原本所占的高度就沒有了，因為脫離了文檔流。
在前端開發(fā)中經(jīng)常遇到需要頁面滾動時，固定某個區(qū)域顯示，常見表格的需求，因為表格有很多列，如果列名不固定在頂部顯示，滾動到底部時，可能就不知道某些列對應(yīng)的是什么了
那我們就聊一下如何在滾動時固定(thead)，讓它始終顯示在列表的上方
css的方案 如何讓tbody滾動如果我們用css來實現(xiàn)，網(wǎng)上常見的一種方案是給tobdy一個固定高度，然后讓它滾動，這樣就實現(xiàn)了滾動列表時，thead不動。
有同學(xué)說tbody沒辦法滾動，所以網(wǎng)上也有用div來拼表格的，這樣就容易滾動了。其實tbody也可以滾動的，比如tbody{display:block} 這樣列的寬度就需要用css來控制了，總之是可以達(dá)到的。
這個方案的缺點在于，頁面上有很多滾動條，tbody的，頁面的。雖然該方案易實施，但在視覺設(shè)計師那里通常是不能忍受的。
使用sticky屬性現(xiàn)在css里有一個position:sticky屬性，正好可以實現(xiàn)該需求，我們只需要給thead加上position:sticky即可。關(guān)于sticky的瀏覽器支持可以看這里 http://caniuse.com/#search=st...
這里有一個坑的地方，給thead的position指定sticky，chrome、safari都可以支持，唯獨firefox是不行的，也就是寫上后沒有任何效果
那么對于不支持sticky的，我們只能再想解決方案了
js的方案別人的方案這里的js方案還是用css來實施的，只是這個過程中加入了js控制
上下2個table
js加載后，把當(dāng)前表格分成上下2個table，上table只顯示thead，下table只顯示tbody。
這個略顯麻煩
再克隆一個thead出來
這個對于原有thead上已經(jīng)綁定了事件，對于克隆后的也要做處理，也很麻煩。
我希望就用一個thead，盡可能的減少輔助節(jié)點，把這個事情搞定
fixed+absolute模擬sticky我們嘗試給thead加上position:fixed，再指定top:0，然后這個thead就脫離的文檔流，固定在頁面頂部顯示了，還好，所有支持fixed的瀏覽器都表現(xiàn)一致，就連firefox也生效了。
這時候帶來的另外問題就是thead脫離文檔流后，thead里面的列的寬度就失效了，也就是thead中的列名稱和tbody里面的列寬度不一致。
這時候想到的方案就是通過計算tbody中的列寬度，然后同步給thead中的列，這樣就能對上了。
但是表格的thead并不是上來就是fixed效果的，而是隨著滾動條的滾動，當(dāng)它處于頁面頂部時才進(jìn)行fixed效果。即thead的position會在static與fixed之間進(jìn)行切換。
這樣子看上去問題就解決了，但是在某些情況下，static與fixed進(jìn)行切換時，前后的列寬度并不一樣，比如static時，某一列是40px的寬度，但是fixed后，通過計算tbody對應(yīng)列的寬度，它變成38了，雖然切換前后thead中的列與tbody中的列寬度仍然是一致的，但是在切換過程中這種寬度的變化導(dǎo)致表格會有一些讓人不舒服的變化，對于我是不能忍的。
既然thead在文檔流中和不在文檔流中，tbody表現(xiàn)并不一致，那我們干脆直接讓thead脫離文檔流好了，該如何脫離呢，給它position:absolute，絕對定位，然后不給left top值，這樣它還在原來的位置，就是不占高度了，這時候我們?nèi)匀挥嬎鉻body中的每一列的寬度，給到thead中的列。然后在absolute與fixed之間進(jìn)行切換時，也不會有任何寬度變化了。
但是，使用absolute或fixed后，原本thead所占的高度就沒有了，因為脫離了文檔流。這時候整個效果還是不對的，我們要想個辦法，找個節(jié)點占著原來thead的高度，這樣才完美。
我最終找了caption標(biāo)簽，然后把thead的高度給到caption。這樣就可以了
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/81961.html
摘要：實現(xiàn)思路就是復(fù)制一下表格頭部然互覆蓋在原有的頭部上，監(jiān)聽滾動事件之前動態(tài)的設(shè)置覆蓋上去的里面的寬度在火狐下會與抖動現(xiàn)象，直接寫樣式就不會了效果圖如下貼一下代碼頭部固定的表格姓名年齡性別身高體重 實現(xiàn)思路就是復(fù)制一下表格頭部然互覆蓋在原有的頭部上，監(jiān)聽滾動事件之前動態(tài)的設(shè)置覆蓋上去的thead里面th的寬度在火狐下會與抖動現(xiàn)象，直接寫樣式就不會了效果圖如下 showImg(https:/...
摘要：實現(xiàn)思路就是復(fù)制一下表格頭部然互覆蓋在原有的頭部上，監(jiān)聽滾動事件之前動態(tài)的設(shè)置覆蓋上去的里面的寬度在火狐下會與抖動現(xiàn)象，直接寫樣式就不會了效果圖如下貼一下代碼頭部固定的表格姓名年齡性別身高體重 實現(xiàn)思路就是復(fù)制一下表格頭部然互覆蓋在原有的頭部上，監(jiān)聽滾動事件之前動態(tài)的設(shè)置覆蓋上去的thead里面th的寬度在火狐下會與抖動現(xiàn)象，直接寫樣式就不會了效果圖如下 showImg(https:/...
閱讀 3245·2021-11-24 09:39
閱讀 3194·2021-10-21 09:38
閱讀 2408·2019-08-29 15:28
閱讀 3752·2019-08-26 12:23
閱讀 2631·2019-08-26 12:19
閱讀 1370·2019-08-23 12:44
閱讀 2137·2019-08-23 12:02
閱讀 1011·2019-08-22 17:05
