如何在Docusaurus中居中所有Markdown表格？

我在Docusaurus文档中使用标准Markdown语法编写表格，示例如下：

text text text text text text text text text text text text text text text text text text 

| a   | b   | c   |
| --- | --- | --- |
| 1   | 10  | 30  |
|     |     |     |
| 2   | 20  | 40  |

text text text text text text text text text text text text text text text text text text 

目前页面中所有Markdown表格默认左对齐，我希望将它们全部设置为默认居中。尝试修改Site/src/css/custom.css文件的两种样式均未达到预期效果：
第一种样式：

table {
    margin:0 auto;
}

第二种样式（仅添加了绿色边框，未实现居中）：

table {
  display: block;
  float: none;
  margin-left: auto;
  margin-right: auto;
  border: 3px solid green;  /* 仅用于演示 */
}

解决方案 #

问题出在选择器优先级不足，Docusaurus的默认样式会覆盖全局table选择器的规则。你需要使用更具体的选择器来针对文档中的表格：

打开Site/src/css/custom.css，添加以下代码：

/* 让表格整体居中 */
.markdown table {
  margin-left: auto;
  margin-right: auto;
}

/* 可选：让表格内的文字也居中 */
.markdown table th,
.markdown table td {
  text-align: center;
}

原理是Docusaurus会将Markdown渲染后的内容包裹在带有markdown类的容器中，使用.markdown table选择器可以提升样式优先级，从而覆盖默认的左对齐规则。

内容的提问来源于stack exchange，提问作者Apogentus