博客园表格自适应脚本
[obsolete]: 博客园对表格提供滚动条的临时解决方案,虽然不理想,但也算一个可以接受的方案,希望以后博客园能对表格有独到的解决方案
问题描述
博客园的表格,如果带了thead表头,在移动端小屏幕上不会自适应,从而导致显示错乱。表格自适应的方式有如下几类:
- 使用CSS在小屏幕上删减一些列,不过这样会丢失数据。
- 使用CSS在小屏幕上隐藏thead,不过这样没有表头。
- 使用CSS在小屏幕上隐藏thead,同时重新排列tbody。例如这里的解决方式:https://paulund.co.uk/css-responsive-tables 一般会把表格元素display:none,然后把每列竖排,并在竖排前插入一个cell做表头,但是这种方式的缺点是重排的效果并不好阅读,而且重复性的表头很杂乱。而且需要为每个td添加一个标记属性。
- 试了各种方案之后,我的解决方案是:获取thead,遍历thead数据在tbody里插入首行加粗做为新的表头,然后隐藏旧的thead,如此即可。
- 可是博客园的的脚本和样式还是会不靠谱,有的主题就是不行,我做法是直接在exceltk里支持生成合适的markdown,见下文
解决方案 1
- 打开博客园后台
- 点击
设置
面板 - 找到
页首Html代码
编辑框 - 添加下面的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 |