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