Vuepress 在 markdown 中对多个 table 设置不同的宽度

markdown

文件中定义了 3 个 table ，在 table 外添加 div 和对应的 class。

// markdown 文件
<div class="table-01">

| 参数 | 说明 | 类型 |
|:----:|:---:|:----:|
|name|姓名 |String|
|age|年龄 |Number|
|salary|薪水 |Number|

</div>

<div class="table-02">

| 参数        | 说明           | 类型    | 必选  | 
|:-------------:|:-------------:|:-----:|:-----:|
|name|姓名 |String|—|
|age|年龄 |Number|—|
|salary|薪水 |Number|—|

</div>

<div class="table-03">

| 参数        | 说明           | 类型    | 必选  | 默认值 |
|:-------------:|:-------------:|:-----:|:-----:|:-----:|
|name|姓名 |String|—|—|
|age|年龄 |Number|—|—|
|salary|薪水 |Number|—|—|

</div>

CSS

这里直接在 palette.styl 文件中写 CSS 样式，样式覆盖可参考 Vuepress CSS 样式覆盖：修改内容宽度。同理，我们也可以对table设置边框，边距等其它样式。

// table 01
.table-01 table{
    th:first-of-type {
        width: 120px;
    }
    th:nth-of-type(2) {
        width: 120px;
    }
    th:nth-of-type(3) {
        width: 120px;
    }
}
// table 02
.table-02 table{
    th:first-of-type {
        min-width: 120px;
    }
    th:nth-of-type(2) {
        width: 30%;
    }
    th:nth-of-type(3) {
        width: 30%;
    }
    th:nth-of-type(4) {
        width: 30%;
    }
}
// table 03
.table-03 table{
    th:first-of-type {
        width: 120px;
    }
    th:nth-of-type(2) {
        width: 100%;
    }
    th:nth-of-type(3) {
        min-width: 120px;
    }
    th:nth-of-type(4) {
        min-width: 120px;
    }
    th:nth-of-type(5) {
        min-width: 120px;
    }
}

效果