Markdown: Wrap tables by div

#### Table 1

Col 1 | Col 2 | Col 3
Sample | Sample | Sample
Sample | Sample | Sample

#### Table 2

Col 1 | Col 2 | Col 3
Sample | Sample | Sample
Sample | Sample | Sample

#### Table 3

Col 1 | Col 2 | Col 3
Sample | Sample | Sample
Sample | Sample | Sample
-```

In order to show the tables in a specific style, I need to put it inside a <div>, the HTML should look like this:

In my page, I can't add HTML, this is not working:

My only solution for now is leaving my page empty. I hard-code the tables's HTML code in my html.twig file, but this gives end-users no ability to modify the tables's content because they do this via admin plugin, they only can modify pages, not theme.

Do you have any solution for my issue? Thank you!

markdown:
    extra: true

#### Table 1

<div class="table-style-1" markdown="1">
| Tables        | Are           | Cool  |
| ------------- |:-------------:| -----:|
| col 3 is      | right-aligned | $1600 |
| col 2 is      | centered      |   $12 |
| zebra stripes | are neat      |    $1 |
</div>

| Sample | <ul><li>Item 1</li><li>Item 2</li><li>Item 3</li><li>Item 3</li></ul> |