部落格園表格自适應腳本

[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