sakuraplus 主题默认是不显示表格边框的,而且对于比较宽的表格容易溢出,使得布局不美观。表格边框可以修改 CSS 来添加,较宽的表格可以通过添加滚动条来控制其不溢出,说起来简单,但是中间有很多坑,特此记录。
添加表格边框
该主题默认的 style 用的是 https://github.com/cungudafa/cdn/blob/master/css/style.css,没有办法修改,因此,我们将采用本地样式表替换它。
打开 themes/hexo-theme-sakuraplus/layout/_partial/head.ejs,找到并注释掉 <link rel="stylesheet" href="<%- theme.libs.css.style %>" type="text/css" media="all" id="saukra_css-css">
,然后添加 <link rel="stylesheet" href="<%- config.root %>css/style.css" media="screen" type="text/css">
,打开 themes/hexo-theme-sakuraplus/source/css/style.css,大概在 1074 行,修改 table 的 CSS 属性,内容如下:
table {
border-collapse: collapse;
border-spacing: 0;
border: 1px solid black;
overflow: auto
}
table td,
table th {
padding: 0;
text-align: left;
border: 1px solid black;
font-size: inherit;
overflow: visible;
padding: .5em 1em
/* border-width: 1px 1px 1px 1px;
border-bottom: 1px solid #cbcbcb;
border-left: 1px solid #cbcbcb;
border-right: 1px solid #cbcbcb;
border-top: 1px solid #cbcbcb;*/
}
划重点:(1)注意分号的有无;(2)后面 5 行需要注释掉,不然所有的代码块都会被加上边框,这是其中的一个坑,当然,也可以将后五行的颜色改为 black,酱紫在黑色代码框中,其边线不是很明显。
存在的问题:即便像上面一样设置,边框其实还是加在了代码块中,我们可以做的就是将边线颜色设置的和代码块颜色一致或者相近。表格里面的样式会被添加到代码块上,比如将 text-align: 设置为 center,所有的代码将居中显示,暂时无解。
为宽表格添加滚动条
在 markdown 表格的开头和结尾各另起行,加入 DIV 和 table 标签,格式如下
<div style="overflow-x:auto;">
<table>
markdown 格式的表格
</table>
</div>
注:<table> 与表格首行之间需要加一空行!