Markown 表格之调整宽度技巧-蒲公英云

Markown 表格之调整宽度技巧

<table> 中表格的宽度由标题的 <th> 决定，我们只需要利用上 CSS 操作一番即可达到目的。

说一下，很多网友说没用，这个不是我能决定的，关键看解析器
比如 CSDN 这个 MD 写的博客里面就没法用 <style> 标签

例如，我这个表格，最后一行【值】部分内容超出了，非常不美观，而且左边明显宽太多，应该做适当调整：
表格过宽

从上图，我们可以了解到，只需要调整【名称】1 列的宽度即可，那么怎么做呢？我们可以先在浏览器中看看 HTML 是怎样的：

<table>
    <thead>
        <tr>
            <th>名称</th>
            <th>值</th>
            <th>备注</th>
        </tr>
    </thead>
    <tbody>
       <!-- 省略 tbody 内容 -->
    </tbody>
</table>

利用浏览器上的开发者工具我们可以调试一下，把【名称】左边的 <th> 改为：

<th style="width: 100px;">

看起来似乎不错。回到 Markdown 上，在原表格前添加 CSS 代码，类似这样：

<style> table th:first-of-type { 
    width: 100px;
}
</style>
<!-- 下方是表格的 Markdown 语法 --!>
名称|值|备注
---|---|---

这里需要一点 CSS 知识，选择器的问题，首先 <th> 存在于 <table> 中；其次 th:first-of-type 的意思是每个 <th> 为其父级的第一个元素，这里指的就是围绕着【名称】的 <th>。同理第二、三个使用 th:nth-of-type(2)、th:nth-of-type(3) 就可以了，以此类推。
上述的 th:first-of-type 等于 th:nth-of-type(1)。上图修改完成后的结果：
这里写图片描述