加载中...
hexo-theme-sakuraplus表格边框及滚动条调教
发表于:2021-10-19 | 分类: 网站建设
字数统计: 548 | 阅读时长: 2分钟 | 阅读量:

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> 与表格首行之间需要加一空行!

参考

上一篇:
在FASTA文件中搜索完全匹配的短序列
下一篇:
SignalP+TMHMM预测微生物分泌蛋白
本文目录
本文目录