2011/03/29

TableKitオレオレテーマ(黒背景用) [CSS][HTML]

このエントリーをはてなブックマークに追加 0 comment
[ , , , ]
「TableKit」は簡単にソート、リサイズ、編集機能をテーブルに追加できるJavaScriptライブラリである。
各社ニッケル水素電池を比較してみる(2011/03/29時点) [battery] ＠試行錯誤的知的生活blog
にて、TableKitを導入してみたので、その時のカスタマイズメモ。

↓以下詳細↓

style.css(TableKit)を編集
矢印画像はFlexigrid同梱のものを拝借。
body {
 font-family: Verdana, Arial, Helvetica, sans-serif;
 font-size: 76%;
}

pre {
 padding: 1em;
 background-color: #F2F2F2;
}
code {
 font-size: 1.2em;
 background-color: #F2F2F2;
}

#content {
 margin: 3em;
}

#content p {
 width: 45em;
}
#mainmenu {
 margin: 1em 0 0 0;
}
.panel {
 clear: both;
 display: none;
 border: 3px solid #00adef;
 padding: 1em;
 background-color: #FFF;
 margin: 0;
}
.panel.active-tab-body {
 display: block;
}
#tabs {
 list-style: none;
 padding: 0;
 margin: 0;
}
#tabs li {
 position: relative;
 float: left;
}
#tabs a {
 float: left;
 padding: 5px 8px;
 margin-right: 6px;
 border: 1px solid #00adef;
 border-width: 1px 1px 0 1px;
 text-decoration: none;
 color: #000;
}
#tabs a:hover {
 background-color: #8dd8f8;
 color: #FFF;
}
#tabs a.active-tab {
 background-color: #00adef;
 color: #FFF;
}
table {
 border-collapse: collapse;
 table-layout: fixed;
}

td, th {
 padding: 0.5em;
 border: 1px solid #CCC;
 /*white-space: nowrap;
 overflow: hidden;*/
}

/*th {
   white-space: pre;
}*/

thead, tfoot {
 background-color: #333;
 /*background-color: #DDD;*/
}

tr.rowodd {
 background-color: #000;
 /*background-color: #FFF;*/
}

tr.roweven {
 background-color: #171717;
 /*background-color: #F2F2F2;*/
}

/*
.sortcol {
 cursor: pointer;
 padding-right: 20px;
 background-repeat: no-repeat, no-repeat;
 background-position: left center, right center;
 background-image: url(flexi_up.png), url(flexi_dn.png);
}
*/
.sortcol {
 cursor: pointer;
 padding-right: 20px;
 background-repeat: no-repeat;
 background-position: right center;
 text-decoration:underline; /*added*/
 FONT-WEIGHT:normal /*added*/
}
.sortasc {
 background-color: #614;
 /*background-color: #DDFFAC;*/
 /*background-repeat: no-repeat; /*added*/
 /*background-position: right center; /*added*/
 background-image: url(flexi_up.png);
 /*background-image: url(up.gif);*/
}
.sortdesc {
 background-color: #146;
 /*background-color: #B9DDFF;*/
 /*background-repeat: no-repeat; /*added*/
 /*background-position: right center; /*added*/
 background-image: url(flexi_dn.png);
 /*background-image: url(down.gif);*/
}
.nosort {
 cursor: default;
}

.urg1, .urg2, .urg3, .urg4, .urg5 {
 padding: 3px;
 text-align: center;
 border: 1px solid #333;
 width: 3em;
}

.urg1 {
 background-color: #FFFACD;
}
.urg2 {
 background-color: #FFD700;
}
.urg3 {
 background-color: #FFA500;
}
.urg4 {
 background-color: #E13E00;
}
.urg5 {
 background-color: Red;
}

th.resize-handle-active {
 cursor: e-resize;
}

div.resize-handle {
 cursor: e-resize;
 width: 2px;
 border-right: 1px dashed #1E90FF;
 position:absolute;
 top:0;
 left:0;
}

head記述例(Blogger用)
テンプレートHTMLの</head>直前に以下を記述 
      <link href='http://～/js/TableKit/css/style.css' rel='stylesheet' type='text/css'/>
      <script src='http://～/js/Prototype/prototype.js' type='text/javascript'/>
      <script src='http://～/js/TableKit/js/fabtabulous.js' type='text/javascript'/>
      <script src='http://～/js/TableKit/js/tablekit.js' type='text/javascript'/>

headに記述しない場合、本文前に追記(Blogger用)
<script>
<!--
/* Body内でCSSを読み込む */
window.onload=function(){
var css=document.createElement("link");
css.setAttribute("rel","stylesheet");
css.setAttribute("type","text/css");
css.setAttribute("href","http://～/js/TableKit/css/style.css");
document.getElementsByTagName("head")[0].appendChild(css);
}
//-->
</script><script src="http://～/js/Prototype/prototype.js" type="text/javascript">
</script><script src="http://～/js/TableKit/js/fabtabulous.js" type="text/javascript">
</script><script src="http://～/js/TableKit/js/tablekit.js" type="text/javascript">
</script>

html記述例(Blogger用)
<table border="1" class="sortable resizable"><caption>ニッケル水素電池比較表（単３）</caption><thead>
<tr><th title="sort" width="20%">製品名</th><th title="sort">メーカー/ブランド</th><th class="number sortfirstdesc" title="sort" width="16%">容量[mAh]</th><th class="number" title="sort" width="10%">繰り返し回数</th><th class="number" title="sort" width="18%">発売日</th></tr>
</thead><tbody>
<tr><td><a href="http://ctlg.panasonic.jp/product/info.do?pg=04&amp;hb=HHR-3LWS2B">HHR-3LWS/2B</a></td><td>Panasonic/EVOLTA</td><td>1000？</td><td><span style="color: orange;">2100</span></td><td>2011.04.21</td></tr>
<tr><td><a href="http://ctlg.panasonic.jp/product/info.do?pg=04&amp;hb=HHR-3MVS2B">HHR-3MVS/2B</a></td><td>Panasonic/EVOLTA</td><td>1950</td><td>1600</td><td>2010.10</td></tr>
<tr><td><a href="http://ctlg.panasonic.jp/product/info.do?pg=04&amp;hb=HHR-3LVS2B">HHR-3LVS/2B </a></td><td>Panasonic/EVOLTA</td><td>1050/1000</td><td>？</td><td>？</td></tr>
<tr><td><a href="http://ctlg.panasonic.jp/product/info.do?pg=04&amp;hb=HHR-3MRS2B">HHR-3MRS/2B </a></td><td>Panasonic/EVOLTA</td><td>2080/2000</td><td>1200</td><td>？(在庫僅少)</td></tr>
<tr><td><a href="http://ctlg.panasonic.jp/product/info.do?pg=04&amp;hb=HHR-3XPS2B">HHR-3XPS/2B</a></td><td>Panasonic</td><td><span style="color: lime;">2600/2400</span></td><td>？</td><td>1998.03？</td></tr>
<tr><td><a href="http://products.jp.sanyo.com/products/hr/HR-3UG-2BP_W/index.html">HR-3UG-2BP</a></td><td>SANYO</td><td><span style="color: orange;">2700/2500</span></td><td>？</td><td>？</td></tr>
<tr><td><a href="http://products.jp.sanyo.com/products/hr/HR-3UTGA-2BP/index.html">HR-3UTGA-2BP</a></td><td>SANYO/eneloop</td><td>1900</td><td>1500</td><td>？</td></tr>
<tr><td><a href="http://products.jp.sanyo.com/products/hr/HR-3UQ-2BP/index.html">HR-3UQ-2BP</a></td><td>SANYO/eneloop lite</td><td>950</td><td><span style="color: lime;">2000</span></td><td>？</td></tr>
<tr><td><a href="http://www.toshiba.co.jp/living/webcata/lamp/th_k.htm">TH-3K 2P</a></td><td>東芝</td><td><span style="color: lime;">2500/2300</span></td><td>？</td><td>？</td></tr>
<tr><td><a href="http://www.kenko-tokina.co.jp/imaging/eq/eq_digital/cat181/energ/4961607862599.html">U-#103EN-2B</a></td><td>ケンコー/ENERG</td><td>1000</td><td>1000</td><td>2010.08.18</td></tr>
<tr><td><a href="http://www.kenko-tokina.co.jp/imaging/eq/eq_digital/cat181/energ/4961607862643.html">U-#203SN-2B</a></td><td>ケンコー/ENERG</td><td>1800</td><td>1000</td><td>2010.08.18</td></tr>
<tr><td><a href="http://www.sony.jp/battery/products/NH-AA-BKB/">NH-AA-2BKB</a></td><td>SONY/サイクルエナジーゴールド</td><td>2100/2000</td><td>1000</td><td>？</td></tr>
<tr><td><a href="http://www.sony.jp/battery/products/NH-AA-BR/">NH-AA-2BR</a></td><td>SONY/サイクルエナジーシルバー</td><td>1000/950</td><td>1500</td><td>？</td></tr>
<tr><td><a href="http://www.sony.jp/battery/products/NH-AA-BF/index.html">NH-AA-2BF</a></td><td>SONY/サイクルエナジーグリーン</td><td><span style="color: lime;">2500/2300</span></td><td>300</td><td>？(生産完了)</td></tr>
<tr><td><a href="http://www.sony.jp/battery/products/NH-AA-BKA/index.html">NH-AA-2BKA</a></td><td>SONY/サイクルエナジーブルー</td><td>2000/1900</td><td>1000</td><td>？(生産完了)</td></tr>
<tr><td><a href="http://www2.elecom.co.jp/battery/de-snh3p2r/index.asp">DE-SNH3P2R</a></td><td>エレコム/AN ECOL.</td><td>1900</td><td>？</td><td>？</td></tr>
<tr><td><a href="http://www.nikon-image.com/products/accessory/camera/compact/battery/">EN-MH2-B2</a></td><td>ニコン</td><td>？</td><td>？</td><td>2008.07.11</td></tr>
<tr><td>EN-MH1-B2</td><td>ニコン</td><td>？</td><td>？</td><td>2003.03.08</td></tr>
<tr><td>BT-JU32</td><td>オーム電機/ECOPRIDE</td><td>2000/1900</td><td>1000</td><td>？</td></tr>
<tr><td>HR-3JUS/2B</td><td>オーム電機/ECOPRIDE S</td><td>1200</td><td>1500</td><td>？</td></tr>
<tr><td>MAA-2800</td><td>マッチモア</td><td><span style="color: orange;">2800</span></td><td>？</td><td>？(販売終了？)</td></tr>
</tbody></table>

実行例
ニッケル水素電池比較表（単３）
製品名メーカー/ブランド容量[mAh]繰り返し回数発売日
HHR-3LWS/2BPanasonic/EVOLTA1000？21002011.04.21
HHR-3MVS/2BPanasonic/EVOLTA195016002010.10
HHR-3LVS/2B Panasonic/EVOLTA1050/1000？？
HHR-3MRS/2B Panasonic/EVOLTA2080/20001200？(在庫僅少)
HHR-3XPS/2BPanasonic2600/2400？1998.03？
HR-3UG-2BPSANYO2700/2500？？
HR-3UTGA-2BPSANYO/eneloop19001500？
HR-3UQ-2BPSANYO/eneloop lite9502000？
TH-3K 2P東芝2500/2300？？
U-#103EN-2Bケンコー/ENERG100010002010.08.18
U-#203SN-2Bケンコー/ENERG180010002010.08.18
NH-AA-2BKBSONY/サイクルエナジーゴールド2100/20001000？
NH-AA-2BRSONY/サイクルエナジーシルバー1000/9501500？
NH-AA-2BFSONY/サイクルエナジーグリーン2500/2300300？(生産完了)
NH-AA-2BKASONY/サイクルエナジーブルー2000/19001000？(生産完了)
DE-SNH3P2Rエレコム/AN ECOL.1900？？
EN-MH2-B2ニコン？？2008.07.11
EN-MH1-B2ニコン？？2003.03.08
BT-JU32オーム電機/ECOPRIDE2000/19001000？
HR-3JUS/2Bオーム電機/ECOPRIDE S12001500？
MAA-2800マッチモア2800？？(販売終了？)

以上。
tag: , , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)