Tocas: ts sortable table沒有浮動表頭(建議功能)

[city8208]

[city8208]

目前我用的onscroll="CheckScroll();"方法：
function CheckScroll() {
document.getElementById("hiddenHead").style.right =( document.getElementById("newdragontable").scrollLeft-(document.getElementById('hiddenHead').scrollWidth-document.getElementById('newdragontable').clientWidth)+17.5)+"px";
//////取得卷軸偏移量(左右)
if(document.getElementById("newdragontable").scrollTop > document.getElementById('th1').clientHeight && document.getElementById("hiddenHead").style.display == "none"){
///若表頭為none(不顯示)，且偏移量大於表頭高度，則觸發此項
document.getElementById("hiddenHead").style.display = "block";
var hiddentableLength = document.getElementById("hiddenHead").innerHTML.split(" document.getElementById("hiddenHead").style.width = document.getElementById("newdragontable").scrollWidth;
for(hiddentableLengthi = 1;hiddentableLengthi <= hiddentableLength;hiddentableLengthi++){
////設定隱藏表頭與當前表頭寬度相同
document.getElementById('hideth'+hiddentableLengthi).width = (document.getElementById('th'+hiddentableLengthi).scrollWidth+2)+"px";
}
}else if(document.getElementById("newdragontable").scrollTop < document.getElementById('th1').clientHeight && document.getElementById("hiddenHead").style.display == "block"){
///若表頭為block(顯示)，且偏移量小於表頭高度，則觸發此項

    document.getElementById("hiddenHead").style.display = "none";
}

}

但說實話，這實在有夠土炮，且位置高度會隨著整個頁面高度不同而要重新調整參數，
希望能夠新增這功能上去，似乎有純CSS解決方案的樣子(如下)
https://codepen.io/tjvantoll/pen/JEKIu

[coin3x]

可以先試試看對表頭使用 position: sticky
https://developer.mozilla.org/en-US/docs/Web/CSS/position

[city8208]

成功!!太感謝你了OAO)!!
我用的是這個
thead th { position: sticky; top: 0; }

可以先試試看對錶頭使用位置：sticky
https://developer.mozilla.org/en-US/docs/Web/CSS/position