Template:Largetable styles/styles.css

table.largetable {
	margin: 0;
}

table.largetable thead,
table.largetable tbody {
	overflow: auto;
}

table.largetable thead {
	white-space: nowrap;
}

table.largetable thead .headerSort {
	position: sticky;
    top: 0;
	background-color: var( --color-surface-2 );
}

table.largetable thead .headerSort:hover {
	background-color: var( --color-surface-2--hover );
}

table.largetable thead .headerSort.headerSortUp,
table.largetable thead .headerSort.headerSortDown {
	background-color: var( --color-primary );
	color: #fff;
}

table.largetable thead .headerSort.headerSortUp:hover,
table.largetable thead .headerSort.headerSortDown:hover {
	background-color: var( --color-primary--hover );
}

table.largetable thead .headerSort:hover {
	background-color: var( --color-surface-2--hover );
}

table.largetable thead tr {
	background-color: transparent !important;
}

table.largetable tr th:first-child,
table.largetable tr td:first-child {
	position: sticky;
	left: 0;
}

table.largetable thead tr th:first-child {
	z-index: 1;	
}

table.largetable tbody tr td:first-child {
	padding: 0; /* Transfer padding to link and allow more clickable area */
	background-color: var( --color-surface-2 );
	font-weight: var( --font-weight-semibold );
}

table.largetable tbody tr td:first-child a {
	display: block;
	padding: var( --space-xs ) var( --space-sm )
}

/* FIXME: Use no overflow class when Citizen is updated */
.citizen-table-wrapper {
	max-height: 60vh;
	border: 1px solid var( --border-color-base );
	border-radius: var( --border-radius--medium );
	mask-image: none !important;
	-webkit-mask-image: none !important;
}