門外漢的筆記

IE11不支援

當表格首欄發生超出視窗時，為了增加閱讀方便，希望能將首欄固定在最上方。

可以透過在首欄內加上position:sticky及Top:0px

Top會對應前面Parent有設置Position: relative，實際試過單純使用sticky在Parent沒有relative情況下，不影響定位功能。

Top設多少取決於你想要設定的距離

CSS樣式

table th{

position: sticky;top: 10px;

background-color:gainsboro;

box-shadow: 1 3px 3px -1px rgba(0, 0, 0, 0.3);

}

在還沒知道使用這個之前，最笨的方法是使用Fixed與absolute，還要抓取相對位置，設定欄寬避免內容跑掉等一堆繁雜的設定。

可以參考這篇說明

https://medium.com/reactfunctioncomponentnote/%E4%BD%A0%E7%9F%A5%E9%81%93%E9%BB%8F%E6%80%A7%E5%85%83%E7%B4%A0-sticky-%E8%88%87%E7%80%91%E5%B8%83%E5%BC%8F%E4%BD%88%E5%B1%80-masonry-layout-%E5%8F%AA%E7%94%A8-css-%E5%B0%B1%E8%83%BD%E9%81%94%E5%88%B0%E6%95%88%E6%9E%9C%E5%97%8E-66f5083c37a5

因IE11不支援，目前最好的操作方式是直接多生成一行標題，然後把寬度設定好後，再使用相對位置position:absolute，然後隱藏起來。

主框架position: relative

固定的標題列

$(this).width($(this).width());

要設攔寬不然會跑掉，也不能先設position，欄寬會設置錯誤。

再設

position:absolute

Top:0px;