MediaWiki talk:Common.css

Common.css vs. Vector.css

Please put the font-size:115% declaration for monospaced text (tt, code, …) into MediaWiki:Vector.css, it looks bad with the MonoBook design. --Rohieb 16:20, 9 August 2012 (BST)

Sticky table headers

Trying to catalog the features relevant to OSM for all of the devices Garmin has put out, and so created a table to that effect. Though I managed to keep the width of the table down, height grows with each device added - which means one loses context just scrolling through the page. So, sticky headers are needed.

The table in question is here.

I've come up with a following, which only requires a wiki table to have an additional 'sticky' class: table.sticky th { position: sticky; box-shadow: 0 1px 1px 1px #aaa; } table.sticky thead th { top: 0; box-shadow: 1px 1px 0 1px #aaa; } table.sticky thead tr:nth-child(2) th { top: 27px; } table.striped tr:nth-child(2n) { background-color: #ddd; }

Please let me know if this can be added to the common style (or if another solution already exists). Kind regards, dl3200.

@Dl3200: Making table headers is a great idea. In fact, it would be a useful change to make for tables throughout the site, but the proposal above hard-codes some details specific to the table you're maintaining. Here's a more general attempt:

/* Pin table headers to the top of the viewport, casting a shadow on scrolled table body */
table.wikitable thead {
	position: sticky;
	top: 0;
	box-shadow: 0 2px 2px 0 #aaa;
}

/* Restore borders between header columns lost when making thead sticky */
table.wikitable thead th {
	outline-style: solid;
	outline-width: 0.5px;
	outline-color: #aaa;
}

/* Distinguish between top of table body and scrolled table body */
table.wikitable thead + tbody {
	border-top: 6px solid #aaa;
}

The last ruleset places a solid border between the table headers and body that becomes a gradient when scrolling down. It works well in Firefox, but I'm not sure about other browsers.

Striping is an interesting idea but worth discussing separately. In my opinion, striping would visually clutter tables that already have both horizontal and vertical rules due to wikitable.

– Minh Nguyễn ^💬 06:03, 27 October 2020 (UTC)

@Minh Nguyen: You're right, the proposal above does hardcode some rules - but that is only for headers with two rows; most tables have just one header row, and that makes it quite universal. Even in the example I give, there's a mix of one- and two-row headers, and that seems to work just fine for me (testing on chrome/chromium and derivatives).

The solution I give also makes it a 'by request' kind of thing - one can make rows striped (by included 'striped') or sticky headers (by including 'sticky') - or both. Which also means you could add it to the common ruleset and that would make that huge table I built usable for people with chrome-based browsers (note - I haven't tested firefox yet, but even still, not using anything chrome-specific), without interfering with anything else on wiki.

I've tried your solution you give, and apart from making a tbody top border very prominent, nothing else happens - headers, in particular, don't stick... Dl3200 (talk) 19:36, 27 October 2020 (UTC)

Thanks for checking. The sticky <thead> works in Firefox and Safari, but not in Chrome due to this Chromium bug. Other large tables on this wiki would benefit just as much from this sticky headers treatment – Default speed limits#Max speeds by road type and vehicle type just to name another example. If you can figure out how to accomplish the same effect in Chrome without special-casing each table's dimensions, we can implement it without worrying about an ongoing maintenance burden. We could also implement the more straightforward approach I proposed above with the caveat that it won't help Chrome users. – Minh Nguyễn ^💬 21:40, 27 October 2020 (UTC)

Does not seem possible to make it universal across browsers, without resorting to javascript... Started having flashbacks to mid-2000s struggle with IE compatibility.

The closest thing to 'universal' solution I came up with is this:

table.sticky th {
	position: sticky;
	box-shadow: 0 1px 1px 1px #aaa;
}
table.sticky thead th {
	top: 0;
	box-shadow: 1px 1px 0 1px #aaa;
	outline-style: solid;
	outline-width: 1px;
	outline-color: #aaa;
}
table.sticky thead tr:first-child {
	height: 70px;
}
table.sticky thead tr+tr th {
	top: 70px;
}
table.striped tr:nth-child(2n) {
	background-color: #ddd;
}

So, just forcing the first header row to be higher than might otherwise be needed, to fit (hopefully) any and all icons included in there. Also, using your solution for showing the borders around the cells, as Firefox seems to lose them for some reason. Also also, keeping it as user-elect - if the table is big enough to warrant a sticky header, it can be edited to specifically request it. Otherwise, you'd lose 40px of vertical space for all tables, which is not ideal.

Don't care all that deeply about the striping, but would be grateful if you included it, too.

-Dl3200 (talk) 02:58, 28 October 2020 (UTC)

Another note on stripes - yeah, it's a mixed bag, I agree. That's why I made it an option, and the only reason I included it at all is the sheer number of columns (30+) - it becomes very easy to lose your place if you're trying to follow rows to compare specs.

-Dl3200 (talk) 19:41, 27 October 2020 (UTC)

in Special:Diff/2054447 as requested. Please ping me or another administrator again if you think of a more general way to stick multiple header rows at the top across browsers. – Minh Nguyễn ^💬 06:27, 28 October 2020 (UTC)

Will do. Thank you so much for your help! – Dl3200 (talk) 06:38, 28 October 2020 (UTC)

MediaWiki talk:Common.css

Common.css vs. Vector.css

Sticky table headers

Navigation menu

Search