cc @YuriSizov @Calinou CSS magic :) This seems to be a good fix, but maybe you want to review in case there is something I'm missing or you know a better way.

Also not sure whether this makes some tables super hard to parse if they have enough numbers only or something. Maybe having a min-width for table columns and allowing tables to have horizontal scroll bars would work?

Anyway, this PR seems an improvement over the current state already on mobile, and everything else should not be impacted.

A better way would be to have a header before each corresponding cell. Without that some tables won't become more usable than they currently are. But at least that makes tables fit the screen nicely, and somewhat improves some of the tables, especially tiny ones.

The problem with the proper solution is that it can't be done with just CSS. We'd need to change the layout somehow. Ideally, we'd want two separate layouts, with one visible at desktop resolution and the other at mobile resolution. But in the RST format we'd still want one table so maintenance doesn't suffer. This means the change must come from the generator, and I'm not sure we have that kind of control.

A better way would be to have a header before each corresponding cell. Without that some tables won't become more usable than they currently are. But at least that makes tables fit the screen nicely, and somewhat improves some of the tables, especially tiny ones.

Could you please provide an example?

Edit: I suppose you are referring at table with headers like in this page: https://docs.godotengine.org/en/stable/about/release_policy.html

The problem with the proper solution is that it can't be done with just CSS. We'd need to change the layout somehow. Ideally, we'd want two separate layouts, with one visible at desktop resolution and the other at mobile resolution. But in the RST format we'd still want one table so maintenance doesn't suffer. This means the change must come from the generator, and I'm not sure we have that kind of control.

How about adding the header on both desktop and mobile and simply showing it on mobile and hiding it on desktop? It will prevent having 2 different DOM.

But, at the moment, I don't know how the generator works. I need to take a look at it.

Edit: Can something like this help readability?

Based on the current proposal, it is only applied to mobile. But I do understand that some templates might be not readable in this way…

Closing for now, as per the lack of consensus and seeing as this has been gathering dust. :) This probably needs a more complex solution as discussed above. Thank you!