Make table headers sticky

05/08/2025, 13:00:14
Ask a question, post a review, or report the script.
Wrap lines
// ==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);
});