博客园表格自适应脚本

[obsolete]: 博客园对表格提供滚动条的临时解决方案，虽然不理想，但也算一个可以接受的方案，希望以后博客园能对表格有独到的解决方案

问题描述

博客园的表格，如果带了thead表头，在移动端小屏幕上不会自适应，从而导致显示错乱。表格自适应的方式有如下几类：

1. 使用CSS在小屏幕上删减一些列，不过这样会丢失数据。
2. 使用CSS在小屏幕上隐藏thead，不过这样没有表头。
3. 使用CSS在小屏幕上隐藏thead，同时重新排列tbody。例如这里的解决方式：https://paulund.co.uk/css-responsive-tables 一般会把表格元素display:none,然后把每列竖排，并在竖排前插入一个cell做表头，但是这种方式的缺点是重排的效果并不好阅读，而且重复性的表头很杂乱。而且需要为每个td添加一个标记属性。
4. 试了各种方案之后，我的解决方案是：获取thead，遍历thead数据在tbody里插入首行加粗做为新的表头，然后隐藏旧的thead，如此即可。
5. 可是博客园的的脚本和样式还是会不靠谱，有的主题就是不行，我做法是直接在exceltk里支持生成合适的markdown，见下文

解决方案 1

1. 打开博客园后台
2. 点击设置面板
3. 找到页首Html代码编辑框
4. 添加下面的JavaScript脚本

<script>
var tables = document.querySelectorAll("table");
for(var i=0;i<tables.length;i++){
	var table = tables[i];
	var thead = table.querySelector("thead");
	if(thead!=void 0){
		var tlh = thead.querySelector("tr");
		var ths = tlh.querySelectorAll("th");
		tlh.setAttribute("style", "display:none");

		var tbody = table.querySelector("tbody");
		var tsh = document.createElement("tr");
		tsh.setAttribute("class","tshead");
		
		tbody.insertBefore(tsh,tbody.firstChild);

		for(var j=0;j<ths.length;j++){
			var td = document.createElement("td");
			td.setAttribute("align", "left");
			td.setAttribute("style", "font-weight:bold");
			td.innerHTML = ths[j].innerHTML;
			tsh.appendChild(td);
		}
	}
}
</script>

解决方案2

exceltk的介绍在这里：http://www.cnblogs.com/math/p/se-tools-001.html

通过指定-bhead 选项，可以生成合适的markdown：

exceltk.exe -t md -bhead -xsl test.xsl

输出如下风格的markdown：

||||||||||||||
|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|:--|
|**姓名**|**序号**|**积点和**|**积点和**|**积点和**|**积点和**|**积点和**|**积点和**|**积点和**|**积点和**|**积点和**|**积点和**|**积点和**|
|某某某|34|6.86|6.86|6.86|6.86|6.86|6.86|6.86|6.86|6.86|6.86|6.86|

效果如下：

姓名	序号	积点和	积点和	积点和	积点和	积点和	积点和	积点和	积点和	积点和	积点和	积点和
某某某	34	6.86	6.86	6.86	6.86	6.86	6.86	6.86	6.86	6.86	6.86	6.86