博客优化-表格样式优化

作者: 潘峰 / 2020-12-11 / 分类: Notes

前端技术, 博客优化

最近在更新之前写的文章《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;
}

实际效果:

好看多了。。。