MediaWiki:Gadget-StickyTableHeaders.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/**
 * Make thead top and tfoot bottom sticky for JS wikitables and sortable tables.
 *
 * Issues:
 * - Broken borders. https://bugs.webkit.org/show_bug.cgi?id=128486
 * - Sticky sorttop/sortbottom after sort: T355492.
 * - Timeless wide tables in overflowable boxes, so not sticky.
 * - Mobile tables in overflowable boxes (display:block), so not sticky.
 * - Other tables in overflowable boxes not sticky without vertical scroll.
 */
@media screen {
  /* Make sticky. */
  .jquery-tablesorter > thead,
  .mw-sticky-header > thead {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 10;
  }
  .jquery-tablesorter > tfoot,
  .mw-sticky-header > tfoot {
    bottom: 0;
    position: -webkit-sticky;
    position: sticky;
    z-index: 10;
  }

  /* Adjust to other sticky elements. */
  @media (min-width: 1120px) {
    .skin-vector-2022.vector-sticky-header-visible .jquery-tablesorter > thead {
      top: 3.125rem;
    }
    .skin-vector-2022.vector-sticky-header-visible [style*="overflow"] .jquery-tablesorter > thead {
      top: 0;
    }
    .client-js.vector-sticky-header-enabled [style*="overflow"] .mw-sticky-header .mw-sticky-header-element {
      top: 0 !important; /* T289817. */
    }
  }
  @media (min-width: 851px) {
    .skin-timeless .content-table-wrapper:not(.overflowed) .jquery-tablesorter > thead,
    .skin-timeless .content-table-wrapper:not(.overflowed) .mw-sticky-header > thead {
      top: 3.51em;
    }
    .skin-timeless [style*="overflow"] .content-table-wrapper:not(.overflowed) .jquery-tablesorter > thead,
    .skin-timeless [style*="overflow"] .content-table-wrapper:not(.overflowed) .mw-sticky-header > thead {
      top: 0;
    }
  }

  /* Fix transparent sticky sorttop/sortbottom (after sort). */
  .jquery-tablesorter > thead,
  .jquery-tablesorter > tfoot {
    background-color: inherit;
  }
}