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; }