博客优化-表格样式优化

最近在更新之前写的文章《python-处理时间与日期》时，发现网页渲染出来的 Markdown Table 十分难看，故打算优化一下 Table 的渲染

检查 DOM

作为一个前端小白，由于不清楚 Hugo 是怎样渲染 Markdown 的 Table，所以想着就先看一下渲染后的 DOM 结构吧。
打开万能的开发者调试工具后，发现大概是这个样子的

<table>
  <thead>
    <tr>
      <th style="text-align:left">索引</th>
      ...
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="text-align:left">0</td>
      ...
    </tr>
    ...
  </tbody>
</table>

那，这不就简单了吗，我的前端知识恰好够覆盖 HTML table 标签的。。。

修改 css 样式表

打开 Hugo 博客项目，找到我的博客依赖的主题的 css 样式表文件位置，Command+F 了一下 table，卧槽，发现没有，怪不得丑成这样：

主题的作者有点懒呀。。。好吧，自己来吧。

所幸一个表格的样式编写并不复杂，但对于一个前端小白来说，还是在 W3CSchool 上查了半天，具体代码如下：

/* Table */

table {
  border-collapse: separate;
  border-spacing: 0;
  max-width: 100%;
  width: 100%;
  margin-bottom: 2rem;
}

th,
td {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.05);
  padding: 0.3rem;
}

th {
  text-align: left;
  font-weight: bold;
  vertical-align: bottom;
}

td {
  vertical-align: inherit;
}

实际效果：

好看多了。。。