document how to scroll-x `<table>`

[Barsnes]

Needed to show how to make tables "responsive" on mobile.
You need a wrapper to do this

[eirikbacker]

In Mattilsynet, we have a rule, allowing you to just wrap the table in a figure to automatically get scrollbars and edge-shadows when scrollable:

figure > .table {
	box-sizing: border-box;
	width: auto;
	min-width: 100%;
}
figure:has(> .table) {
	animation: _scrollShadow linear;
	animation-timeline: scroll(self inline);
	margin-inline: 0;
	overflow: auto;
	overscroll-behavior-x: contain; /* Prevent browser back/forward history on end of scroll */
	position: relative; /* Ensure also inner position: absolute elements are scrolled */
	-webkit-overflow-scrolling: touch; /* Enhance scrolling on iOS */
}
@keyframes _scrollShadow {
	from { box-shadow: inset -0.5rem 0 0.5rem -0.5rem rgb(0 0 0 / 0.4) }
	to { box-shadow: inset 0.5rem 0 0.5rem -0.5rem rgb(0 0 0 / 0.4) }
}

[Barsnes]

In Mattilsynet, we have a rule, allowing you to just wrap the table in a figure to automatically get scrollbars and edge-shadows when scrollable:

figure > .table {
	box-sizing: border-box;
	width: auto;
	min-width: 100%;
}
figure:has(> .table) {
	animation: _scrollShadow linear;
	animation-timeline: scroll(self inline);
	margin-inline: 0;
	overflow: auto;
	overscroll-behavior-x: contain; /* Prevent browser back/forward history on end of scroll */
	position: relative; /* Ensure also inner position: absolute elements are scrolled */
	-webkit-overflow-scrolling: touch; /* Enhance scrolling on iOS */
}
@keyframes _scrollShadow {
	from { box-shadow: inset -0.5rem 0 0.5rem -0.5rem rgb(0 0 0 / 0.4) }
	to { box-shadow: inset 0.5rem 0 0.5rem -0.5rem rgb(0 0 0 / 0.4) }
}

probably not a bad idea. We could consider adding this as well. Any reason for why a <figure> and not a helper class?

[eirikbacker]

☺️ no particular reason, just like single-name-classes so tableScroller did not cut it 😅 🤓

[Barsnes]

☺️ no particular reason, just like single-name-classes so tableScroller did not cut it 😅 🤓

hm, right. I think I'd rather go for a selector like this: [data-scroll-table] > .table so you can use any element. Would remove the very small edgecase where you want <figure> around table, but it should not scroll 🤷🏻
The data attr could get a better name though

[eirikbacker]

good idea 🤗 and, maybe it even can just be a component of its own? scroller as it does not really interact with the table at all? 🤔 ☺️

[Barsnes]

good idea 🤗 and, maybe it even can just be a component of its own? scroller as it does not really interact with the table at all? 🤔 ☺️

Actually not a bad idea. I've encountered multiple occasions where a proper scroll area would be nice to have 🤔
Kind of a layout component? 😄