美化博客hexo文章中表格显示

博客文章的样式是主题提供的,我使用的主题phase,并没有提供表格样式,所以自己修改。创建文件themes/phase/source/css/user.css,添加需要的样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
table {
width: 100%; /*表格宽度*/
max-width: 65em; /*表格最大宽度,避免表格过宽*/
border: 1px solid #dedede; /*表格外边框设置*/
margin: 15px auto; /*外边距*/
border-collapse: collapse; /*使用单一线条的边框*/
empty-cells: show; /*单元格无内容依旧绘制边框*/
border-radius: 4px;
}
table th,table td {
height: 35px; /*统一每一行的默认高度*/
border: 1px solid #dedede; /*内部边框样式*/
padding: 0 10px; /*内边距*/
}
table th {
font-weight: bold; /*加粗*/
text-align: center !important; /*内容居中,加上 !important 避免被 Markdown 样式覆盖*/
background: rgba(158,188,226,0.2); /*背景色*/
}
table th {
white-space: nowrap; /*表头内容强制在一行显示*/
}
table td:nth-child(1) {
/*首列不换行*/
white-space: nowrap;
}
table tbody tr:nth-child(2n) {
/*隔行变色*/
background: rgba(102, 128, 153, 0.05);
}
table tr:hover {
background: #efefef;
}

修改文件themes/phase/layout/_partial/head.ejs,在

1
<link rel="stylesheet" href="<%- config.root %>css/style.css" media="screen" type="text/css">

下面添加

1
<link rel="stylesheet" href="<%- config.root %>css/user.css" media="screen" type="text/css">

重新生成页面即可,样式参考文章Markdown 表格样式调整与自适应优化 中的样式