Template:Sticky header/styles.css

/* {{pp-template}} */
@media screen {
	.sticky {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	body.vector-sticky-header-visible .sticky {
		top: 3.125rem;
	}

	.sticky-header > thead {
		position: sticky;
		top: 0;
		z-index: 10;
	}

	body.vector-sticky-header-visible .sticky-header > thead {
		top: 3.125rem;
	}

	/**
	 * Fix scroll transparency on thead's cell background.
	 */
	.sticky-header {
		background-color: white;
	}
	.sticky-header thead,
	.sticky-header tbody,
	.sticky-header tfoot,
	.sticky-header tr,
	.sticky-header td,
	.sticky-header:not(.wikitable) th {
		background-color: inherit;
	}

	/**
	 * Fix scroll transparency on thead's cell spacing.
	 */
	.sticky-header:not(.wikitable) {
		border-collapse: collapse;
	}

	/**
	 * Fix missing borders due to position sticky and "wikitable" collapsed
	 * borders.
	 */
	.sticky-header.wikitable {
		border-collapse: separate;
		border-color: #a2a9b1; /* Set so same on mobile version (#54595d). */
		border-spacing: 0;
		border-width: 0 1px 1px 0;
	}
	.sticky-header.wikitable td,
	.sticky-header.wikitable th,
	.sticky-header.static-row-numbers.wikitable tbody tr:not(.static-row-header)::before {
		border-color: #a2a9b1; /* Set so same on mobile version (#eaecf0). */
		border-width: 1px 0 0 1px !important;
	}
	.sticky-header.static-row-numbers.wikitable thead tr::before,
	.sticky-header.static-row-numbers.wikitable .static-row-header::before {
		border-left: 1px solid #a2a9b1;
	}
	.sticky-header.static-row-numbers.wikitable thead tr:first-child::before,
	.sticky-header.static-row-numbers.wikitable .sortbottom::before, /* Sortbotton #1: all. When supported, consolidate #1-2 to tr:nth-child(1 of .sortbottom)::before */
	.sticky-header.static-row-numbers.wikitable:not(.sortable) tr:first-child::before {
		border-top: 1px solid #a2a9b1;
	}
	.sticky-header.static-row-numbers.wikitable .sortbottom ~ .sortbottom::before { /* Sortbottom #2: all minus 1st. */
		border-top: 0;
	}
}

/**
 * Reset Wikipedia styles causing sticky and float issues on mobile.
 * Note: Fixes mobile version on Windows desktop, but not Android portrait mode.
 */
@media all and (max-width: 720px) {
	.sticky-header {
		display: table; /* Was "block" */
	}
	.sticky-header caption {
		display: table-caption; /* Was "block" */
	}
}