Table extension: Add (optional?) container element to handle horizontal overflow

[Paul-Hebert]

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 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:

<div style="overflow-x: auto; max-width: 100%">
  <table><!-- table innards... --> </table>
</div>

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:

|Heading|Heading|
|--------|--------|
|Content|Content|

It currently outputs something like this:

<table><!-- table innards... --></table>

It would be nice if it output this instead:

<div class="table-container">
  <table><!-- table innards... --></table>
</div>

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!

[colinodell]

Thanks for the feedback! This is a great idea. I'll try to work on this over the coming weekend unless somebody beats me to it :)

[Paul-Hebert]

Awesome, thanks @colinodell !

[colinodell]

@Paul-Hebert How does the implementation in #787 look to you?

[Paul-Hebert]

@colinodell this looks fantastic, great work!

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!)

[colinodell]

I've added that additional option and released the feature in https://github.com/thephpleague/commonmark/releases/tag/2.2.0! 🎉