Hexo下表格的美化和优化

今天借助之前Typecho博客的MarkDown表格优化方法给Hexo博客的表格也进行了优化,以备不时之需,其实原理很简单,就是给MarkDown语法里表格添加了自定义的CSS样式而已。

只需要将下面的代码根据自己的需要添加到对应的Hexo主题目录自定义CSS文件里即可,如NexT主题的:themes\next\source\css\_custom\custom.styl

基本样式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
table {
width: 100%; /*表格宽度*/
max-width: 65em; /*表格最大宽度,避免表格过宽*/
border: 1px solid #dedede; /*表格外边框设置*/
margin: 15px auto; /*外边距*/
border-collapse: collapse; /*使用单一线条的边框*/
empty-cells: show; /*单元格无内容依旧绘制边框*/
}
table th,
table td {
height: 35px; /*统一每一行的默认高度*/
border: 1px solid #dedede; /*内部边框样式*/
padding: 0 10px; /*内边距*/
}

表头样式

1
2
3
4
5
table th {
font-weight: bold; /*加粗*/
text-align: center !important; /*内容居中,加上 !important 避免被 Markdown 样式覆盖*/
background: rgba(158,188,226,0.2); /*背景色*/
}

隔行变色

使用选择器选取复数行设置背景色。一般 Markdown 表格编译后都有 包裹内容,那下面就相当于从表格第二行开始计数

1
2
3
table tbody tr:nth-child(2n) {
background: rgba(158,188,226,0.12);
}

#悬浮变色

鼠标悬浮时该行改变背景色

1
2
3
table tr:hover {
background: #efefef;
}

表头不换行

设置表头单元格内容不换行,这样可以通过表头控制该列的最小宽度,避免浏览器窗口缩小时内容被压缩得太紧

1
2
3
table th {
white-space: nowrap; /*表头内容强制在一行显示*/
}

首列不换行

表格第一列单元格内容不换行,多数情况下表格首列不应该被压缩换行

1
2
3
table td:nth-child(1) {
white-space: nowrap;
}

然后编辑Hexo文章的时候正常使用MarkDown语法的表格制作符制作表格即可。

样例

MarkDown语法表格代码如下:

1
2
3
4
5
6
7
8
|姓名|年龄|性别|民族|
|:---:|:---|---:|:---:|
|张三丰|100||汉族|
|张翠山|35||汉族|
|殷素素|33||汉族|
|张无忌|12||汉族|
|赵敏|12||蒙古族|
|小昭|12||波斯人|

具体表格效果如下:

姓名 年龄 性别 民族
张三丰 100 汉族
张翠山 35 汉族
殷素素 33 汉族
张无忌 12 汉族
赵敏 12 蒙古族
小昭 12 波斯人

怎么样?这个表格的效果很酷吧?MarkDown语法下明月最喜欢的就是这个表格制作的方式了,完全代码状态下就可以直接生产表格,不像WordPress那样还需要借助HTML代码来实现,自动的同时还可以这么美化,绝对的方便高效了!

明月登楼 wechat
欢迎您扫一扫上面的微信公众号,订阅我的博客!