Large table overflowing (hidden by right sidebar) without horizontal scrollbar

[jorisvandenbossche]

Large tables can overflow, but without visual scrollbar to indicate this and help scrolling. This is noticeable in our own example from the kitchen sink (https://pydata-sphinx-theme.readthedocs.io/en/latest/examples/kitchen-sink/tables.html#giant-tables):

(it seems it is already like this in several releases, I noticed that in 0.9 it actually just didn't hide the overflow: https://pydata-sphinx-theme.readthedocs.io/en/v0.9.0/demo/kitchen-sink/lists-and-tables.html#giant-tables)

From quickly playing with the browser dev tools, I noticed that changing the display to frim table to block made it add a horizontal scrollbar:

pydata-sphinx-theme/src/pydata_sphinx_theme/assets/styles/content/_tables.scss

Lines 5 to 10 in 48e4c01

	// ensure table will fit in the article width and make them y-scrollable
	table {
	@include table-colors;
	display: table;
	overflow: auto;

[gabalafou]

In some browsers, changing the display value of a table element to block, grid, or flex will alter its representation in the accessibility tree. This will cause the table to no longer be announced properly by screen reading technology.
‐ MDN - display - Table

This issue with display: table and the accessibility tree may or may not be true anymore on newer browsers. But changing the display property has other consequences as well.

I think the most straightforward solution is to wrap each table in a scrollable div, which is what I do in #1827.