Shiny从入门到入定——16-Escaping the graph

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

参考

• CSS表格