2008年07月17日

テーブルの見出しを固定してデータ部分だけをスクロールさせる

スポンサード リンク

都道府県データ
  都道府県 県庁所在地  面積 Ku      人口 県の花
  2008年6月1日の推計人口です。
北海道 札幌市 83,456.38 5,571,770 ハマナス
青森県 青森市 9,607.05 1,396,659 りんご
岩手県 盛岡市 15,278.85 1,354,239 キリ
宮城県 仙台市 7,285.60 2,344,045 ミヤギノハギ
秋田県 秋田市 11,612.22 1,110,938 ふきのとう
山形県 山形市 9,323.46 1,190,358 ベニバナ
福島県 福島市 13,782.75 2,057,322 ネモトシャクナゲ
茨城県 水戸市 6,095.69 2,966,831 バラ
栃木県 宇都宮市 6,408.28 2,013,249 やしおつつじ
群馬県 前橋市 6,363.16 2,012,148 レンゲツツジ
埼玉県 さいたま市 3,797.25 7,127,895 サクラソウ
千葉県 千葉市 5,156.60 6,136,775 菜の花
東京都 東京新宿 2,187.58 12,880,364 ソメイヨシノ
神奈川県 横浜市 2,415.84 8,944,118 やまゆり

CSS でヘッダ固定、データ行を スクロールさせるテーブル

サンプルソース


<HTML>
<HEAD>
<TITLE>テーブルの表題を固定してデータ部分だけをスクロールさせる</TITLE>
<script language="JavaScript">
<!--
window.onload = cngrow;
function cngrow(){ //行の背景を一行おきに塗分けします。詳細はこちら
var myTR =document.getElementById("myTBL").rows;
for (var i=0;i<myTR.length;i++) {
var v=i%2;
if (v==1) {
myTR[i].style.backgroundColor = "#ffccff";
myTR[i].style.color = "navy";
}
}
}
//-->
</script>
</HEAD>
<BODY>
<TABLE cellpadding="2" width="310" style="background-color : #ffe3c8;" cellspacing="0">
<CAPTION>都道府県データ</CAPTION>
<THEAD style="background-color : olive;color : white;">
<TR><TH>都道府県</TH><TH align="left">県庁所在地</TH></TR>
</THEAD>
<TFOOT style="background-color : olive;color : white;">
<TR>
<TD colspan="2">&nbsp; テーブルフッタです。</TD>
</TR>
</TFOOT>
<TBODY>
<TR>
<TD colspan="2">
<DIV style="height:100px; overflow:auto;">
<TABLE id="myTBL" width="290" style="background-color : white;">
<colgroup span="1" width="140"></colgroup>
<colgroup span="1" width="140"></colgroup>
<TBODY>
<TR><TH>北海道</TH><TD>札幌市</TD></TR>
<TR><TH>青森県</TH><TD>青森市</TD></TR>
<TR><TH>岩手県</TH><TD>盛岡市</TD></TR>
<TR><TH>宮城県</TH><TD>仙台市</TD></TR>
<TR><TH>秋田県</TH><TD>秋田市</TD></TR>
<TR><TH>山形県</TH><TD>山形市</TD></TR>
<TR><TH>福島県</TH><TD>福島市</TD></TR>
<TR><TH>茨城県</TH><TD>水戸市</TD></TR>
</TBODY></TABLE>
</DIV>
</TD>
</TR>
</TBODY>
</TABLE>
</BODY>
</HTML>

TABLEの中にもう一 つTABLEを入れます。このTABLE<DIV style="height:100px; overflow:auto;"></DIV>で囲います。
overflowプロパティで、overflow:auto;を指定するとボックスの範囲内(DIV style="height:100px)にTABLEが入りきらない場合に、
スクロールバーが付きスクロールして見る事ができるようになります。height:100pxの数値は変更できます。
サンプルソースは簡略化のためサンプルの表とは違います。
JavaScriptコードはテーブルの行を一行おきにハイライトするためのものです。なくても本体の動作には影響ありません、



posted by javaScript at 14:56 | 大阪 ☀ | テーブル | このブログの読者になる | 更新情報をチェックする
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。