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 | 大阪 ☁ | テーブル | このブログの読者になる | 更新情報をチェックする

2012年11月21日

line-heightプロパティ 行の高さを指定

スポンサード リンク

行ボックスの高さ(行の高さ)を指定
javascriptで行間を変更

 このボックス(p要素)は、line-heightプロパティの値を "1.5em"、
font-sizeプロパティの値を"16px"、で指定しています。
上記セレクトボックスで値を変更すると、
このボックスの文章の行間を変更することができます。
line-height は、一行の高さを指定するプロパティです。
たとえば line-height: 1.5em; font-size: 16px;の場合
行の高さがフォントサイズの1.5倍(24px)になるので24px-16px=8px:
"8px"が行と行の間として、上下均等に"4px"ずつ分けられます。
このスタイルを設定すると、文章の行間を適度に空けることができ、
文章を読みやすくすることができます。
日本語の文章の場合最適なline-heightプロパティの値は1.3em〜1.7em 程度でしょう。
※ 行の高さがフォントサイズより小さな値の場合には、 行が重なって表示されます。
マイナス値は指定することはできません。

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

サンプルソース

<html>
 <head>
<title>line-heightプロパティ</title>
 <style type="text/css">
 <!--
   #smp{
     line-height: 1.5em;
     font-size: 16px;
     border: 1px solid blue;
     padding-left: 10px;
        }
-->
</style>

<script type="text/javascript">
function Selc(num){  //選択された項目の値を取得。
 var lineH=num.options[num.selectedIndex].value; 
 document.getElementById("smp").style.lineHeight = lineH;
    }
</script>

</head>
<body>
<form> <!--セレクトボックス-->
<select name="slc" onchange="Selc(this)">
  <option value="*" selected>line-heightプロパティ値を選択</option>
  <option value="normal">normal</option>
  <option value="0.8em">0.8em</option>
  <option value="1.0em">1.0em</option>
  <option value="1.1em">1.1em</option>
  <option value="1.2em">1.2em</option>
  <option value="1.3em">1.3em</option>
  <option value="1.4em">1.4em</option>
  <option value="1.5em">1.5em</option>
  <option value="1.6em">1.6em</option>
  <option value="1.7em">1.7em</option>
  <option value="1.8em">1.8em</option>
  <option value="1.9em">1.9em</option>
  <option value="2.0">2.0em</option>
</select>
</form>
<p id="smp">
 このボックス(p要素)は、<br>
line-heightプロパティの値を "1.5em"、<br>
font-sizeプロパティの値を"16px"、で指定しています。<br>
上記セレクトボックスで値を変更すると、<br>
このボックスの文章の行間を変更することができます。<br>
line-heightは、行の高さを指定するプロパティです。<br>
たとえば line-height: 1.5em; font-size: 16px;の場合<br>
以下省略・・・・・・・ </p> </body> </html>
line-height プロパティ
一行の高さを指定するプロパティです。
マイナス値は指定することはできません。
適用対象は全ての要素 です。
書式
p { line-height: 値; }
値の指定
line-height: normal;
   ブラウザの標準の行の高さ(1.0から1.2倍)になります。
   数値に [px]、[em]、などの単位をつけます。
line-height: パーセンテージ値(%);}
   適用要素のフォントサイズに対するパーセンテージ値(%)。
line-height: 実数値; //小数点一桁まで
   適用要素のフォントサイズに対する倍数。// "1.5"ならフォントサイズの
  "1.5"倍という事になります。
lineHeight プロパティ
javascriptでline-height プロパティを操作するには
obj.style.lineHeight="値" と記述します。上記サンプルでは
document.getElementById("smp").style.lineHeight = lineH;
となります。lineHにはセレクトボックスで選択した"値"が入ります。

heteml
ロリポップ!のドメインは選べる全85種類!!
さくらのレンタルサーバ ビジネスプロ
セレクトメニューの設置 値の取得 onchangeイベント
javascript 文字、文字列
指定した範囲内の文字を抜き出します。substring()メソッド
右から指定した文字数を取り出す substr()メソッド
左から指定した文字数を取り出します substr()メソッド
文字列から1文字取り出します。charAt()メソッド
正規表現による文字列置換 String.replace();
文字列の長さ(文字数)を取り出す。 length プロパティ
一致する文字列の有無を調べます。indexOf()メソッド
文字列の単語間のスペース word-spacingプロパティ
javascript文字 点滅

posted by javaScript at 20:46 | 大阪 ☁ | 文字、文字列 | このブログの読者になる | 更新情報をチェックする
×

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