在前端開發中經常遇到需要頁面滾動時，固定某個區域顯示，常見**的需求，因為**有很多列，如果列名不固定在頂部顯示，滾動到底部時，可能就不知道某些列對應的是什麼了
那我們就聊一下如何在滾動時固定(thead)，讓它始終顯示在列表的上方
如果我們用css來實現，網上常見的一種方案是給tobdy乙個固定高度，然後讓它滾動，這樣就實現了滾動列表時，thead不動。
有同學說tbody沒辦法滾動，所以網上也有用div來拼**的，這樣就容易滾動了。其實tbody也可以滾動的，比如tbody 這樣列的寬度就需要用css來控制了，總之是可以達到的。這個方案的缺點在於，頁面上有很多滾動條，tbody的，頁面的。雖然該方案易實施，但在視覺設計師那裡通常是不能忍受的。
現在css裡有乙個position:sticky屬性，正好可以實現該需求，我們只需要給thead加上position:sticky即可。關於sticky的瀏覽器支援可以看這裡
這裡有乙個坑的地方，給thead的position指定sticky，chrome、safari都可以支援，唯獨firefox是不行的，也就是寫上後沒有任何效果那麼對於不支援sticky的，我們只能再想解決方案了
這裡的js方案還是用css來實施的，只是這個過程中加入了js控制上下2個table
js載入後，把當前**分成上下2個table，上table只顯示thead，下table只顯示tbody。
這個略顯麻煩再轉殖乙個thead出來
這個對於原有thead上已經繫結了事件，對於轉殖後的也要做處理，也很麻煩。我希望就用乙個thead，盡可能的減少輔助節點，把這個事情搞定
我們嘗試給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。這樣就可以了
我是如何做知識付費的
對這個領域可能你了解過，也可能沒有了解過，沒關係，通過本課程的講解，或許對你有一些幫助。可能也有人會問，知識付費真的可以做嗎，我又適不適合去做呢？我可以告訴你，任何乙個行業，都可以通過知識付費來做一遍，而且，許多人已經依靠做知識付費每年收入過百萬，所以，不要質疑能不能做，行動起來才是真正要做的。課程...
「我」是如何做測試專案管理的
帶專案差不多1個季度了，針對這一季度的工作做乙個總結，分析一下成長和遇到的問題，希望後面可以做的更好。以下內容有自己的總結，也有參考蔡為東老師的步步為贏 軟體測試管理全程實踐。專案內容 ios端專案 測試組主要工作職責 做好測試工作，以最少的人力 物力和cost產出符合需求 保障質量的產品。測試專案...
C 是如何做爬蟲的
建立url，並建立請求 攜帶cookie request.cookiecontainer cookiecontainer 傳送請求，並獲取html 讀取流 streamreader streamreader new streamreader stream,encoding.getencoding g...