見出し行固定、スクロールテーブルを css のみで実現
個々の列幅を自由に設定可能
テーブルの行数（データ）が多くなった場合、
ブラウザのスクロールバーでスクロールしていくと、見出し（ヘッダ）が見えなくなってしまいます。
これを回避するため、ヘッダを固定し、データ部分のみを
スクロールさせる方法をCSSだけで行っています。
heteml
【ちょ～簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版！
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
サンプルソース
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>CSS でヘッダ固定、データ行を スクロールさせるテーブル。</title><style type="text/css"> <!-- #sclTbl { /* スクロール対象のテーブル */background-color: #fff;/* テーブルの背景色 borderの色になる */border-collapse:separate; /* 枠線の表示の仕方 */font-size: 16px;/* 文字のサイズ */} #out_Div { /* 全体の枠。ここにヘッダを格納 */ position: relative; /* 相対位置 */ padding-top: 26px; /* #in_Div の開始位置 */ width: 480px; /* 列幅の合計＋セル間の幅(2px)の合計＋20px 程度 */ border: 1px solid #0099cc; /* 外枠 */ background-color: #fff; /* 白 */ } #in_Div {/* tbodyが入っている。ここがスクロール対象*/ overflow: auto; /* スクロールバー*/ height: 133px; /* tbodyを表示する高さ */ } #sclTbl thead tr {/* ヘッダ 見出し行,位置を #out_Div の左上端に移動 */ position: absolute; /* 絶対位置 */ top: 0px; /* 上からの位置 */ left: 0px; /* 左からの位置 */ background-color: #fff; } #sclTbl thead tr th{/* thead 'th'のスタイル */ background-color: #0099cc; /* 背景色 */ color: #fff; /* 文字色 */ padding: 3px 0px; } #sclTbl tbody tr td{/* tbody 'td'のスタイル */ background-color: #dcdcdd; color: blue; padding: 3px 6px; } .coL0 { width: 30px; }/* colgroupの列幅指定 */ .coL1 { width: 100px; } .coL2 { width: 120px; } --> </style> </head> <body> <div id="out_Div"> <div id="in_Div"> <table id="sclTbl"> <!--colgroup tableの列をグループ化し、列幅指定--> <colgroup class="coL0"></colgroup> <colgroup class="coL1"></colgroup> <colgroup class="coL2"></colgroup> <colgroup class="coL1" span="2"></colgroup> <thead> <tr> <th class="coL0">Ｎo</th> <th class="coL1">都道府県</th> <th class="coL2">県庁所在地</th> <th class="coL1">人口</th> <th class="coL1">面積（ｋ㎡)</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>北海道</td> <td>札幌市</td> <td>5,517,449</td> <td>78,420.61</td> </tr> <tr> <td>2</td> <td>青森県</td> <td>青森市</td> <td>1,382,637</td> <td>9,644.21</td> </tr> <tr> <td>3</td> <td>岩手県</td> <td>盛岡市</td> <td>1,340,852</td> <td>15,278.89</td> </tr> <tr> <td>4</td> <td>宮城県</td> <td>仙台市</td> <td>2,340,029</td> <td>7,285.75</td> </tr> <tr> <td>5</td> <td>秋田県</td> <td>秋田市</td> <td>1,097,626</td> <td>11,636.25</td> </tr> <tr> <td>6</td> <td>山形県</td> <td>山形市</td> <td>1,179,964</td> <td>9,323.46</td> </tr> <tr> <td>7</td> <td>福島県</td> <td>福島市</td> <td>2,042,816</td> <td>13,782.75</td> </tr> <tr> <td>8</td> <td>茨城県</td> <td>水戸市</td> <td>2,967,404</td> <td>6,095.69</td> </tr> <tr> <td>9</td> <td>栃木県</td> <td>宇都宮市</td> <td>2,010,732</td> <td>6,408.28</td> </tr> <tr> <td>10</td> <td>群馬県</td> <td>前橋市</td> <td>2,006,903</td> <td>6,363.16</td> </tr> </tbody> </table> </div> </div> </body> </html>
ｃｓｓでヘッダ固定、データ行を スクロールさせるテーブル。
- TABLE要素を二つのDIV要素で囲む。
<div id="out_Div"> <div id="in_Div">。 - 外側のDIV要素
<div id="out_Div">に'position: relative;'を設定し
'padding-top'でTHEAD要素の高さだけ<div id="in_Div">の開始位置を下げる。
'width'は列幅の合計＋セル間の幅(2px)の合計＋２０px 程度が目安です。 - 内側のDIV要素
<div id="in_Div">に'overflow:auto;'と'height'を指定して
TBODY要素が溢れた場合、スクロールバーを表示する。 - THEAD要素のTR要素に
'position:absolute; top:0px; left:0px;'を指定。
ヘッダ行を外側のDIVの左上に移動。 colgroupにクラス名で個々の列幅を指定。IE7の場合はTHとTDの列幅は揃うのだが
Firefox12ではＴＨにcolgroupの指定が効かない。
仕方がないのでそれぞれのTHにクラス名を設定。// 移動したのが原因か....？- positionプロパティ これが肝になっています。
ロリポップ！のドメインは選べる全８５種類！！
☆さくらのレンタルサーバ ビジネスプロ☆
CSS positionプロパティ
overflow プロパティ
colgroup 要素 表の列をグループ化
javascript テーブル 列の背景色 変更 cellIndexプロパティ
background 背景に関するプロパティ 一覧
paddingプロパティ ボックスの内側の余白
