Tables are too wide

[meyerbaptiste]

For example: https://api-platform.com/docs/core/events/#the-event-system

[Fabious]

I see two ways of fixing this :

• overflow-x: auto on the container, if a big table exists, user can scroll the whole container. Easy fix, but a bit weird
• Wrap the <table> with <div style="overflow-x: auto">, a lot better UX wise, but need to see how to add that with the remark html generator from markdown

[Fabious]

Tried to find a nice solution to this and here's the problems i encounter (Gatsby related) :

gatsby-transformer-remark is used to parse the markdowns files, i don't think there is way to tell it : "hey, if you find a table, just wrap it in a div". No options for that.

I can use String.replace on the output string of this process (in gatsby-node.js), something like :

• <table> -> <div><table>
• </table> -> </div></table>

I don't know if it's a good solution tho...