如何在MkDocs中为指定Markdown表格添加类或ID以自定义样式

问题背景 #

使用MkDocs Material主题时，希望给指定表格单独设置CSS样式，而非全站所有表格。尝试过用带类的标签包裹表格、在表格前后添加{: .myTableClass }等方法，但均导致表格无法正常渲染，需要靠谱的实现方式。

可行方案 #

方案1：开启attr_list扩展，直接给表格加类 #

Material主题支持Python-Markdown的attr_list扩展，开启后可直接为表格添加类/ID，且不影响渲染。

1. 配置mkdocs.yml：
   在配置文件中添加该扩展：

   markdown_extensions:
     - attr_list
   

2. 修改Markdown表格：
   在表格结束的下一行（无空行）添加类定义：

   ## COMMAND
   
   |Specifier|alias|parameters |function               |
   |---------|-----|-----------|-----------------------|
   |start    |R    |           |Start                  |
   |load     |F    |;myfilename|Load                   |
   {: .myTableClass }
   

3. 效果：
   生成的HTML中，md-typeset__table容器会带上.myTableClass类，你可以通过CSS直接定位：

   .myTableClass table {
     /* 自定义样式，比如： */
     border-collapse: collapse;
     border: 1px solid #ddd;
   }
   

方案2：用HTML容器包裹表格，通过外层类定位 #

如果不想开启扩展，可直接用HTML标签包裹目标表格，通过外层类来定位内部表格。

1. 修改Markdown：
   用<div>包裹表格及对应标题：

   <div class="my-table-container">
   ## COMMAND
   
   |Specifier|alias|parameters |function               |
   |---------|-----|-----------|-----------------------|
   |start    |R    |           |Start                  |
   |load     |F    |;myfilename|Load                   |
   </div>
   

2. 编写CSS：
   通过外层类穿透到表格：

   .my-table-container .md-typeset__table table {
     /* 你的样式 */
     background-color: #f5f5f5;
   }
   

方案3：利用标题ID定位表格，无需修改内容 #

如果不想改动现有Markdown内容，可利用表格所在标题的ID，通过CSS相邻选择器定位目标表格。

1. 查看标题ID：
   示例中标题## COMMAND生成的HTML是<h2 id="command">，ID为command。
2. 编写CSS：
   用相邻选择器定位该标题后的表格：

   #command + .md-typeset__scrollwrap .md-typeset__table table {
     /* 自定义样式 */
     font-size: 0.9rem;
   }
   

为什么之前的方法失败？ #

• 未开启attr_list扩展时，{: .myTableClass }会被当成普通文本渲染，导致表格格式错乱。
• 用带类的标签包裹时，若格式不正确（比如标签与表格间有多余空行），会触发Markdown的块级元素解析规则，导致表格无法正常渲染。

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