Table width overflow

[zhuozhiyongde]

Astro Info

Astro                    v5.4.0
Node                     v18.20.4
System                   macOS (arm64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             unocss
                         astro-pure
                         output-copier

If this issue only occurs in one browser, which browser is a problem?

All

Describe the Bug

Due to the current compilation process converting markdown table syntax to table without additional wrapping, it is difficult to control its overflow behavior. In cases of width overflow, it causes the entire page to display a horizontal scrollbar.

I tried the following methods, but none of them worked:

1. Adding display: block; width: 100%; overflow-x: scroll to the table still causes it to expand.(Text no longer overflows, but thead and tbody will still implicitly expand the width.)

2. Add overflow-x: auto to the parent element of the table, the div that wraps all the markdown parsed content, which will cause the entire div to have a horizontal scrollbar.

What's the expected result?

When parsing markdown tables, add an extra layer of div.

Link to Minimal Reproducible Example

https://stackblitz.com/edit/github-znw2yb4k?file=src%2Fcontent%2Fblog%2Ffirst-post.md

Participation

• I am willing to submit a pull request for this issue.

[ascorbic]

Hi. If you want to wrap tables in a div, you can add them yourself. I tried this in your demo, which worked:

Tempus quam pellentesque nec nam aliquam sem. Risus at ultrices mi tempus imperdiet. Id porta nibh venenatis 
cras sed felis eget velit. Ipsum a arcu cursus vitae. Facilisis magna etiam tempor orci eu lobortis elementum. 
Tincidunt dui ut ornare lectus sit. Quisque non tellus orci ac. Blandit libero volutpat sed cras. Nec tincidunt praesent
 semper feugiat nibh sed pulvinar proin gravida. Egestas integer eget aliquet nibh praesent tristique magna.

<div style="overflow-x: auto">

| Column 1        | Column 2        | Column 3           | Column 4          | Column 5      | Column 6         | Column 7        | Column 8      | Column 9      | Column 10    |
| --------------- | --------------- | ------------------ | ----------------- | ------------- | ---------------- | --------------- | ------------- | ------------- | ------------ |
| Lorem ipsum     | dolor sit       | amet               | consectetur       | adipiscing    | elit             | sed do          | eiusmod       | tempor        | incididunt   |
| ut labore       | et dolore       | magna aliqua       | Ut enim ad        | minim veniam  | quis nostrud     | exercitation    | ullamco       | laboris       | nisi ut      |
| aliquip ex      | ea commodo      | consequat          | Duis aute         | irure dolor   | in reprehenderit | in voluptate    | velit esse    | cillum dolore | eu fugiat    |
| nulla pariatur  | Excepteur sint  | occaecat cupidatat | non proident      | sunt in culpa | qui officia      | deserunt mollit | anim id est   | laborum       | finibus      |
| Vivamus         | sagittis lacus  | vel augue          | laoreet rutrum    | faucibus      | dolor auctor     | Nulla vitae     | elit libero   | a pharetra    | augue        |
| Cras mattis     | consectetur     | purus sit          | amet fermentum    | Fusce dapibus | tellus ac        | cursus commodo  | tortor mauris | condimentum   | nibh         |
| Integer posuere | erat a ante     | venenatis dapibus  | posuere velit     | aliquet       | Aenean eu        | leo quam        | Pellentesque  | ornare sem    | lacinia quam |
| Sollicitudin    | Integer posuere | erat a ante        | venenatis dapibus | posuere velit | aliquet          | Aenean eu       | leo quam      | Pellentesque  | ornare sem   |

</div>