Markown 表格之调整宽度技巧

我会带着你远行 2021-09-11 06:24 1479阅读 0赞

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

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

--------------------

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

--------------------

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

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

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

这里需要一点 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)`。上图修改完成后的结果：  
![这里写图片描述][format_png 1]

[format_png]: /images/20210908/6474bfca35964d90846b84069d8a4577.png
[format_png 1]: /images/20210908/388be71a0ff846e19dc0023b19e2b881.png