Markdown table alignment ignored

Describe the problem

One should be able to create tables with specified alignment, as in

Left Aligned	Centered	Right Aligned
Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

| Left Aligned | Centered | Right Aligned |
| :---         | :---:    | ---:          |
| Cell 1       | Cell 2   | Cell 3        |
| Cell 4       | Cell 5   | Cell 6        |

Using MyST, it seems to be at the discretion of the theme. For example, RTD looks like this while the PyData theme looks like

Link to your repository or website

No response

Steps to reproduce

Paste the above markdown table into a document parsed by MyST.

The version of Python you’re using

3.9.6

Your operating system

Arch Linux

Versions of your packages

MyST-Parser 0.15.1

Additional context

No response

[chrisjsewell]

Heya, so basically the intention in the markdown parser, is to set a style on each cell: you can see if you put this table into https://markdown-it.github.io, you’ll get e.g.

<table>
<thead>
<tr>
<th style="text-align:left">a</th>
<th style="text-align:center">b</th>
<th style="text-align:right">c</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align:left">1</td>
<td style="text-align:center">2</td>
<td style="text-align:right">3</td>
</tr>
</tbody>
</table>

However, with docutils/sphinx there is no way to propagate a style into the HTML, so currently it is setting these as classes

e.g. the same output in sphinx is

<table class="colwidths-auto table">
<thead>
<tr class="row-odd">
<th class="text-align:left head"><p>a</p></th>
<th class="text-align:center head"><p>b</p></th>
<th class="text-align:right head"><p>c</p></th>
</tr>
</thead>
<tbody>
<tr class="row-even">
<td class="text-align:left"><p>1</p></td>
<td class="text-align:center"><p>2</p></td>
<td class="text-align:right"><p>3</p></td>
</tr>
</tbody>
</table>

There are actually two things not ideal with this table (a) we don’t need the paragraph tags (I checked with RST and that also outputs <p>), and (b) the text-align are classes rather than styles

If you want to fix this with the current myst-parser then, the way would be to add some custom CSS to your project:

.text-align\:left, text-align\:left > p {
  text-align: left
}
.text-align\:center, text-align\:center > p {
  text-align: center
}
.text-align\:center, text-align\:right > p {
  text-align: right
}

A minimal fix here would be to at least document this workaround, probably improve the naming of the CSS classes, and maybe reach out to some of the main themes to include it in their CSS

cc @choldgraf (sphinx-book-theme), @pradyunsg (furo) what is your preference for the class names

[chrisjsewell]

A related issue (I think) is that when I use :align: center in a table directive it doesn’t seem to have any effect on the generated HTML (so the custom css workaround doesn’t work).

This is because of https://github.com/pydata/pydata-sphinx-theme/issues/524 Note, a workaround would be to add :class: align-center