Any chance you can get this working w/ 1-2 columns for cell phones?

Also thank you very much for picking this up!

Can't we defer the column layout to CSS? I'm not an expert in these things, but flexbox with flex-wrap could likely do the job.

@story645@timhoffm
Thank you for your feedback!

• For mobile devices, the symbol table supports horizontal scrolling.
• Currently, the symbol table is rendered as a styled HTML<table>, and switching to a flexbox-based layout would require changing the output to<div> elements instead of<table>. This could introduce breaking changes across the documentation and affect existing styles
  For now, I've kept the table structure for consistency, but if there's interest in a more flexible layout in the future, we could consider a larger refactor.

Let me know if you have any further suggestions!

This could introduce breaking changes across the documentation and affect existing styles

Why if you only apply the css style to the div class for the math table? We have other custom css classes inhttps://github.com/matplotlib/matplotlib/blob/main/doc/_static/mpl.css

Apologies, I did not read the issue carefully enough and missed the bit about checking how it responds to window resizing. I think a few potential contributors also missed that so I took the liberty of editing the issue OP to hopefully make it obvious.

Why if you only apply the css style to the div class for the math table? We have other custom css classes inhttps://github.com/matplotlib/matplotlib/blob/main/doc/_static/mpl.css

Thank you for your suggestion!

The current table styles are provided by the documentation theme, which ensures consistent look and feel (including things like row highlighting on hover, alternating row colors, and compatibility with theme changes) across all tables—certainly not just the math table. While it’s possible to apply a custom CSS class to a<div>-based structure, that would require us to rewrite all existing<table> elements as<div>s and reimplement all table-related styles and behaviors (such as row hover effects, responsive adjustments, etc.) in custom CSS.

This could lead to duplicated effort, potential inconsistencies, and more maintenance if the theme changes in the future.

In addition, I’d like to confirm the original intent of this issue, just to make sure we’re on the same page.

Is the main goal to:

• Achieve a fully responsive layout for the symbol table (e.g., adapting the number of columns automatically based on screen size, like showing 1-2 columns on mobile and more on desktop)? or
• Simply avoid hardcoding the number of columns in the code that generates the table, and instead compute the optimal column count based on content and available width (but still use a fixed table layout)?
  If the intention is to support true responsive layouts (for example, using CSS to adapt the number of columns on different devices), it would be helpful to state this explicitly in the issue description so we can design the solution accordingly.

Thanks again for your feedback!

The goal is more truly responsive layout, w/ avoiding fixed column size being a kinda of iterative step.

One of the ways we get responsive grids in other parts of the docs is by usinghttps://sphinx-design.readthedocs.io/en/latest/grids.html. Is there a way to maybe use that here - have the directive auto generate/populate a sphinx design grid?

Thank you for clarifying and for the suggestion regarding Sphinx Design grids!

I will work on redefining the directive to auto-generate a Sphinx Design grid and provide suitable CSS for the symbol table. I do want to note that if the theme or the Sphinx Design extension changes in the future, we may need to maintain or update the custom styles to ensure continued compatibility.

I'm also still learning about advanced grid layouts and their best practices, so I would really appreciate any further advice or examples you can share—especially regarding responsive grids and integration with Sphinx Design.

Thanks again for your helpful feedback and guidance!

provide suitable CSS for the symbol table

You might not need to - the sphinx grid might just do the trick.