Markdown 表格之调整宽度技巧

  

<table>

中表格的宽度由标题的

<th>

决定，我们只需要利用上 CSS 操作一番即可达到目的。

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



  从上图，我们可以了解到，只需要调整【名称】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)

。上图修改完成后的结果：