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