テーブルの表を伸縮させるjavascript「ElasticTable」

テーブルで多くの項目を作りたいけどスペースが・・・
という悩みは、このjavascriptで解消されそうです。
ElasticTableはテーブルで作成した各項目を自在に伸縮してくれます。

使用方法

ElasticTableからelastictable.jsとelastictable.cssをmootoolsからmootools.jsをダウンロードします。

<script src="http://yourdomain/mootools.js" type="text/javascript"></script>
<script src="http://yourdomain/elastictable.js" type="text/javascript"></script>
<link rel="stylesheet" href="http://yourdomain/elastictable.css"style type="text/css">
<script type="text/javascript">
window.addEvent('load', function(){
	new ElasticTable({table:'id名'});
});
</script>

上記を記述したら、指定したid名をtableに付与すれば完成です。
＊1×1のthにfixedwidth fixedheightを付与うることで、デフォルトに戻るように設定できます。
<th class="fixedwidth fixedheight" style="width:横幅;height:高さ;"></th>
オプション
minWidth: '', //最小幅：デフォルト4%
minHeight: '', //最小高さ：デフォルト4%

サンプル

Mon	Tue	Wed	Thu	Fri	Sat	Sun
1st	2nd	3rd	4th	5th	6th	7th
8th	9th	10th	11th	12th	13th	14th
15th	16th	17th	18th	19th	20th	21st
22nd	23rd	24th	25th	26th	27th	28th

Javascriptサンプルページ一覧

skuare.net