With the dropping of IE11 container queries are very viable here: https://caniuse.com/css-container-queries but it's worth noting our LESS parser does not support them, so we'd need to do this in a CSS file.

How about a gradient to transparency so that it is clear that the element continues to the right?

Timeless handles this well:

In T361737#9915929, @Jack_who_built_the_house wrote:

Timeless handles this well:

(https://www.mediawiki.org/wiki/Extension:Popups?useskin=timeless, shrink the window to see)

This is done by wrapping the table, and using JS to detect overflow, toggling additional classes, and adding two siblings that use relative positioning to overlay the gradient. It's elegant in one way, but also pretty invasive to do, with lots of dom modifications using JS. If we think of nested tables inside infobox or other scripts doing DOM modifications, this can quite easily break some content. I still think its worth considering, but not sure it will be garuanteed to work.

In T361737#9917978, @TheDJ wrote:

This is done by wrapping the table, and using JS to detect overflow, toggling additional classes, and adding two siblings that use relative positioning to overlay the gradient. It's elegant in one way, but also pretty invasive to do, with lots of dom modifications using JS.

I was able to simplify that a bit with pseudo-elements instead of siblings:

.overflowed.scroll-right::after,
.overflowed.scroll-left::before {
  content: '';
  box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.25);
  border-left: solid 1px #c8ccd1;
  height: 100%;
  position: absolute;
  bottom: 0;
  z-index: 1;
}

.overflowed.scroll-right::after {
  right: 0;
}

.overflowed.scroll-left::before {
  left: 0;
}

This is done by wrapping the table, and using JS to detect overflow, toggling additional classes, and adding two siblings that use relative positioning to overlay the gradient. It's elegant in one way, but also pretty invasive to do, with lots of dom modifications using JS

Vector 2022 was somewhat inspired by Timeless's approach, but the intention behind Vector 2022's JavaScript is for it to be temporary and its purpose is to mitigate and inform a future version of the parser/content. In future, I envision this will log warnings/errors until an editor makes the appropriate editorial change to fix the table e.g. wrapping it in a div with a class.

How about a gradient to transparency so that it is clear that the element continues to the right?

I believe a gradient was considered before on mobile (Minerva/MobileFrontend) for tables, but declined with reasoning, but I can't find the associated ticket. Sharing in case this triggers someone else's memory.

Change #1114084 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/Vector@master] Tables: new approach to making tables fit to the content

https://gerrit.wikimedia.org/r/1114084

Change #1128938 had a related patch set uploaded (by Jdlrobson; author: Jdlrobson):

[mediawiki/skins/MinervaNeue@master] POC: Allow tables and math equations to break out of the content area

https://gerrit.wikimedia.org/r/1128938

Test wiki created on Patch demo by Jon (WMF) using patch(es) linked to this task:
http://patchdemo.wmcloud.org/wikis/0a1682d742/w/

Change #1114084 abandoned by Jdlrobson:

[mediawiki/skins/Vector@master] Tables: new approach to making tables fit to the content

Reason:

Needs more discussion on core change. Will look to make fixing this a Q4 goal.

https://gerrit.wikimedia.org/r/1114084

In T361737#9915929, @Jack_who_built_the_house wrote:

How about a gradient to transparency so that it is clear that the element continues to the right?

This seems to be an industry default at this point. ChatGPT's wide-table functionality appeared, like, yesterday, and it already has these side gradients:

This is weird that the main Internet's encyclopedia can't handle such a basic encyclopedic format like tables, honestly. At this pace, people are just going to stop using Wikipedia for tabular information and resort to generating custom tables with LLMs.

This is weird that the main Internet's encyclopedia can't handle such a basic encyclopedic format like tables, honestly. At this pace, people are just going to stop using Wikipedia for tabular information and resort to generating custom tables with LLMs.

User generated content is the issue here. The first step would be updating the parser so table element is wrapped in a DIV element. This would likely cause disruption to existing templates/editors, but I think we are getting to the point where we'll just need to do this and cause that disruption so we don't get left behind.

Test wiki on Patch demo by Jon (WMF) using patch(es) linked to this task was deleted:

https://patchdemo.wmcloud.org/wikis/0a1682d742/w/

Change #1128938 abandoned by Jdlrobson:

[mediawiki/skins/MinervaNeue@master] POC: Allow tables and math equations to break out of the content area

Reason:

TBC on https://phabricator.wikimedia.org/T391781

https://gerrit.wikimedia.org/r/1128938

Lol, checked the current standings in the Formula One 2025 season and was sure that Norris won it ...before realizing there is a horizontal scrollbar