风也温柔

计算机科学知识库

css表格边框样式 hexo-theme-sakuraplus表格边框及滚动条调教

  主题默认是不显示表格边框的,而且对于比较宽的表格容易溢出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: 设置为,所有的代码将居中显示,暂时无解。

  css表格边框样式_css div边框样式 美化_css table边框样式

  被表格样式传染的代码块带上了边框

  为宽表格添加滚动条

  在表格的开头和结尾各另起行,加入DIV和table标签,格式如下

  格式的表格

  注:与表格首行之间需要加一空行!

  参考

  原文链接:hexo-theme-表格边框及滚动条调教 |

  文章来源:https://zhuanlan.zhihu.com/p/423742975