You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I'm using the Tables extension to add tables to markdown. On small screens the tables often extend outside of the viewport, breaking the page layout.
This is because elements with display: table do not respond to width and max-width the same way block elements do. There's no easy CSS way to constrain the table to its container. In the past I've handled it like so:
It would be nice if there was a way to configure the tables extension to wrap all tables in an element (div?) with a configurable class (e.g. table-container). This would make it easy to use the table extension without breaking responsive layouts.
In the meantime it seems like the only workaround is to extend the Table Renderer with a custom render function. (Which is not the end of the world, by any means, but it would be nice if this was a built-in option.)
I'm currently pretty busy at work, but if this is a feature you're open to I could try to find time to make a PR in the future.
To prevent making this a breaking change, it would probably be best to make this an optional configuration setting for the tables extension.
Did this project help you today? Did it make you happy in any way?
This project is sooooooo good. I'm working on a project that requires some pretty complex custom markdown parsing, and the extension structure makes this really easy to set up. (I was originally planning to use a lot of regex, but I'm glad I found this project instead 😅 )
Thank you so much for your work on this project! It works great, is a breeze to build off of, and has saved me a ton of time!
The text was updated successfully, but these errors were encountered:
The only other thing I could think of would be to make the wrapping tag configurable (e.g. adding an option to use a figure over a div) but I don't think this is necessary. (I'd probably default to using a div so this works for me!)
Description
I'm using the Tables extension to add tables to markdown. On small screens the tables often extend outside of the viewport, breaking the page layout.
This is because elements with
display: table
do not respond towidth
andmax-width
the same way block elements do. There's no easy CSS way to constrain the table to its container. In the past I've handled it like so:It would be nice if there was a way to configure the tables extension to wrap all tables in an element (
div
?) with a configurable class (e.g.table-container
). This would make it easy to use the table extension without breaking responsive layouts.In the meantime it seems like the only workaround is to extend the Table Renderer with a custom render function. (Which is not the end of the world, by any means, but it would be nice if this was a built-in option.)
I'm currently pretty busy at work, but if this is a feature you're open to I could try to find time to make a PR in the future.
Example
Take the following markdown:
It currently outputs something like this:
It would be nice if it output this instead:
To prevent making this a breaking change, it would probably be best to make this an optional configuration setting for the tables extension.
Did this project help you today? Did it make you happy in any way?
This project is sooooooo good. I'm working on a project that requires some pretty complex custom markdown parsing, and the extension structure makes this really easy to set up. (I was originally planning to use a lot of regex, but I'm glad I found this project instead 😅 )
Thank you so much for your work on this project! It works great, is a breeze to build off of, and has saved me a ton of time!
The text was updated successfully, but these errors were encountered: