博客园表格自适应脚本

[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
posted @ 2016-11-22 13:20  ffl  阅读(819)  评论(2编辑  收藏  举报