Cannot add overflow property to table

Initial checklist

[X] I read the support docs
[X] I read the contributing guide
[X] I agree to follow the code of conduct
[X] I searched issues and couldn’t find anything (or linked relevant results below)

Affected packages and versions

9.0.1

Link to runnable example

No response

Steps to reproduce

Render a bigger markdown table that has many columns to require horizontal scroll.
Add a paragraph into the markdown content.
The horizontal scroll is applied to the entire react markdown component (include the paragraph and table)

Expected behavior

The horizontal scroll should only be applied to the table. I have to insert the

into a

that it has fixed size, and in

style I have to set overflow: scroll But currently react-mark is not wrapping the table in a div making scroll localized to the table (and not the entire markdown content) impossible

Actual behavior

Scroll to the right make the entire markdown content scroll.

Affected runtime and version

react 18.3.1, node 23.0.0

Affected package manager and version

No response

Affected OS and version

No response

Build and bundle tools

Create React App

How table is being rendered currently

Expected table to be wrapped in div block

ChristianMurphy commented 2 weeks ago

Welcome @derikpham! 👋 React Markdown by default generates Commonmark standard output, which does not include these attributes. Nor does GFM another common flavor supported.

A plugin could add additional attributes to style https://github.com/remarkjs/remark/blob/main/doc/plugins.md#list-of-plugins https://github.com/rehypejs/rehype/blob/main/doc/plugins.md

Or override the table component to add you desired custom CSS https://github.com/remarkjs/react-markdown?tab=readme-ov-file#components