Szablon:Large-table.css

/**
Large wikitable UX.

Two versions:
- wide table is mobile phone friendly table: inside of: <div class="large-wikitable sticky-left"></div>
- very high table is generally more friendly table with classes: large-wikitable sticky-left

Adding CSS to a page:
<templatestyles src="large-table.css"/>

Some examples:
[[Wikipedysta:Nux/test szerokie wikitabele - large-table]]
*/
/* nowrap */
@media (min-width: 768px) {
	.large-wikitable.nowrap th,
	.large-wikitable.nowrap td {
		white-space: nowrap;
	}
	/* breaks position:sticky for .sticky-top */
	/*
	.large-wikitable.sticky-top.nowrap {
		width: auto;
		overflow-x: scroll;
	}
	*/
}
/* left-right scroll */
.large-wikitable.sticky-left {
	width: auto;
	overflow-x: scroll;
}
/* sticky header (top) */
.large-wikitable.sticky-top tbody > tr:first-child {
	position: sticky;
	/*top: var(--top-bar-height, calc(3.125rem + 1px));*/
	top: calc(3.125rem + 1px);
	z-index: 10;
}
/* sticky left-column */
.large-wikitable.sticky-left td:first-child,
.large-wikitable.sticky-left th:first-child {
	position: sticky;
	left: 0;
	z-index: 10;
	border-left-style: solid;
}
/* wikitable without collapsing */
table.large-wikitable,
.large-wikitable > table
{
	/* Note! Collapsing doesn't work well with sticky headers. */
	border-collapse:unset;
    border-spacing: 0;

	border-width: 1px;
	border-color:rgba(84,89,93,0.3);
    border-style: solid none none solid;

	background-color: var(--background-color-base, #fff);
}
table.large-wikitable.sticky-left,
.large-wikitable.sticky-left > table {
    border-style: solid none none none;
}
.large-wikitable > tr > th, .large-wikitable > tr > td,
.large-wikitable > * > tr > th, .large-wikitable > * > tr > td,
.large-wikitable tbody,
.large-wikitable thead,
.large-wikitable tr,
.large-wikitable td,
.large-wikitable th
{
	border-style: none;
	border-width: 1px;
	border-color: inherit;
}
.large-wikitable > tr > th, .large-wikitable > tr > td,
.large-wikitable > * > tr > th, .large-wikitable > * > tr > td,
.large-wikitable td,
.large-wikitable th
{
	border-right-style: solid;
	border-bottom-style: solid;
}
.large-wikitable > table > tr > th,
.large-wikitable > table > * > tr > th {
	background-color:#eaecf0;
	text-align:center
}

/* [[Kategoria:Szablony - arkusze stylów]] */