The long table overflow in mobile screen.

[PrinOrange]

Hi, there 👋

Describe the bug

When insert a long lengh table in post and it renders overflow in horizontal direction, such as this example

This bug situation is similar to #766 but the problem element is table. I'm trying to take same measure of your solution in #766 to fix this bug: add the class prose-table: overflow-x-auto, I want to add a horizontal scrollbar to absorb the overflow but it does not work.

In fact, not merely the KateX block, table-block, there still many potential problems for markdown element horizontal overflow.

So, is there anything common solution to solve this problem?

To Reproduce Steps to reproduce the behavior:

1. insert a long table in post

|      | col_name1 | col_name2 | col_name3 | col_name4 | col_name5 | col_name6 | col_name7 | col_name8 | col_name9 | col_name0 |
|------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|-----------|
| row1 |           |           |           |           |           |           |           |           |           |           |
| row2 |           |           |           |           |           |           |           |           |           |           |

2. Open the devtools and enable the mobile-simulator, make page width small and observe the element overflow

Expected behavior

I'm seeking for a common solution for adding horizontal scrollbar to deplete the overflow for any markdown element.

Thank you very much.

[timlrx]

You could add a overflow-x-auto class to the layout element. This would just make the entire prose container scrollable and avoid the table spilling out.

Unfortunately there's no way to just make the table scrollable, without modifying the markdown. You could consider substituting the default table with a TableWrapper component that does that.