Wrap tables in scrollable div (pydata#1827)

Fixes pydata#1824

src/pydata_sphinx_theme/assets/styles/content/_tables.scss

@@ -55,3 +55,9 @@ td {
     --pst-color-text-base
   ); // ensure text and bullets are visible
 }
+
+.pst-scrollable-table-container {
+  // Put a scrollbar just below tables that are too wide to fit within the main
+  // column
+  overflow-x: auto;
+}

src/pydata_sphinx_theme/translator.py

@@ -81,9 +81,17 @@ def visit_table(self, node):
         if "align" in node:
             classes.append(f'table-{node["align"]}')
 
+        # put table within a scrollable container (for tables that are too wide)
+        self.body.append('<div class="pst-scrollable-table-container">')
+
         tag = self.starttag(node, "table", CLASS=" ".join(classes), **atts)
         self.body.append(tag)
 
+    def depart_table(self, node):
+        """Custom depart_table method to close the scrollable div we add in visit_table."""
+        super().depart_table(node)
+        self.body.append("</div>\n")
+
 
 def setup_translators(app: Sphinx):
     """Add bootstrap HTML functionality if we are using an HTML translator.