【Hexo】美化表格

通过jupyter notebook导出的markdown文件中的表格过于丑陋，遂尝试对生成的表格内容进行美化。

步骤

创建自定义的CSS文件

在themes/next/source/css/main.styl中添加一行内容。

1	@import "_custom/custom"

然后在themes/next/source/css目录下创建_custom文件夹。再进入该文件夹创建名为custom.styl的文件，用它来配置自己需要的CSS样式。

基本样式

table {
    width: 100%; /*表格宽度*/
    max-width: 65em; /*表格最大宽度，避免表格过宽*/
    border: 1px solid #dedede; /*表格外边框设置*/
    margin: 15px auto; /*外边距*/
    border-collapse: collapse; /*使用单一线条的边框*/
    empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
  height: 25px; /*统一每一行的默认高度*/
  font-size: 10px;  /*行内字符大小*/
  border: 1px solid #dedede; /*内部边框样式*/
  padding: 0 10px; /*内边距*/
}

表头样式

table th {
    font-size: 10px;  /*表头字符大小*/
    font-weight: bold; /*加粗*/
    text-align: center !important; /*内容居中，加上 !important 避免被 Markdown 样式覆盖*/
    background: rgba(158,188,226,0.2); /*背景色*/
}

示例

		open	high	low	close	volume	amount
date	code
2020-11-16	000001	17.08	17.43	16.90	17.37	759856.0	1.308190e+09
	000002	29.39	29.50	29.00	29.20	516576.0	1.509810e+09
	000004	31.15	31.46	30.11	30.61	72456.0	2.223127e+08
	000005	2.68	2.70	2.65	2.69	64372.0	1.725762e+07
	000006	5.66	5.74	5.62	5.72	98253.0	5.592563e+07
	000007	9.42	9.42	9.18	9.20	22567.0	2.094628e+07
	000008	2.72	2.74	2.70	2.73	171930.0	4.678304e+07
	000009	7.71	7.88	7.66	7.82	320180.0	2.492149e+08
	000010	4.19	4.27	4.10	4.24	71661.0	3.004320e+07
	000011	13.76	14.40	13.58	14.39	105639.0	1.489735e+08

参考：