Make table headers sticky

05/08/2025, 13:00:14

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램을 설치해야 합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

Advertisement:

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

Advertisement:

// ==UserScript==
// @name        Make table headers sticky
// @namespace   Violentmonkey Scripts
// @match       https://*/wiki/*
// @match       https://techlore.tech/*
// @match       https://wiki.*/*
// @match       https://*freie-messenger*/*
// @grant       none
// @version     1.1
// @author      SHA
// @license     GNU GPLv3
// @description 05/08/2025, 13:00:14
// ==/UserScript==

// TODO: use jQuery and $(...).floatThead() instead because "display: sticky" doesn't work with "overflow-x: auto".

window.addEventListener("load", (event) => {

  setTimeout(() => {
    const tables = document.querySelectorAll("table:not(.infobox):not(.sidebar)"); // exclude fact sheets on wikipedia
    tables.forEach(table => {
      table.style.display = "table";
      const header = table.querySelector("tr:first-of-type");
      header.style.position = "sticky";
      header.style.top = "0";
      header.style.zIndex = "10000";
      const rowHeaders = table.querySelectorAll("tbody th");
      rowHeaders.forEach(th => {
        th.style.position = "sticky";
        th.style.left = "0";
        th.style.zIndex = "10000";
      });
    });

    // for https://techlore.tech/vpn/
    const grids = document.querySelectorAll("*[role=grid]");
    grids.forEach(grid => {
      grid.style.display = "initial";
      const header = grid.querySelector("*[role=rowgroup]:first-of-type");
      header.style.position = "sticky";
      header.style.top = "0";
      header.style.zIndex = "10000";
    });
  }, 500);
});