2012年11月26日

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

スポンサード リンク

見出し行固定、スクロールテーブルを css のみで実現
個々の列幅を自由に設定可能

テーブルの行数(データ)が多くなった場合、
ブラウザのスクロールバーでスクロールしていくと、見出し(ヘッダ)が見えなくなってしまいます。
これを回避するため、ヘッダを固定し、データ部分のみを
スクロールさせる方法をCSSだけで行っています。

heteml
【ちょ〜簡単設置】初心者でもすぐ使える、無料アクセス解析の決定版!
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ

サンプルソース

<!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">No</th>
   <th class="coL1">都道府県</th>
   <th class="coL2">県庁所在地</th>
   <th class="coL1">人口</th>
   <th class="coL1">面積(ku)</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>
cssでヘッダ固定、データ行を スクロールさせるテーブル。
  • 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)の合計+20px 程度が目安です。
  • 内側のDIV要素 <div id="in_Div">'overflow:auto;'と'height'を指定して
    TBODY要素が溢れた場合、スクロールバーを表示する。
  • THEAD要素のTR要素に'position:absolute; top:0px; left:0px;'を指定。
    ヘッダ行を外側のDIVの左上に移動。
  • colgroup にクラス名で個々の列幅を指定。IE7の場合はTHとTDの列幅は揃うのだが
    Firefox12ではTHにcolgroup の指定が効かない。
    仕方がないのでそれぞれのTHにクラス名を設定。// 移動したのが原因か....?
  • positionプロパティ これが肝になっています。

ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
CSS positionプロパティ
overflow プロパティ
colgroup 要素 表の列をグループ化
javascript テーブル 列の背景色 変更 cellIndexプロパティ
background 背景に関するプロパティ 一覧
paddingプロパティ ボックスの内側の余白

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

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