2009年01月12日

テーブル(表)のセルを重ね、ずらして表示します。

スポンサード リンク

テーブル@ テーブルA テーブルB テーブルC テーブルD

普通に表示すると上のように見えるテーブル(表)ですが
スタイルシートCSSを使って列を重ねて表示するようにしてみました。
zIndex プロパティで、マウスポインタがセルに乗るとそのセルを
一番手前に表示します。

JavaScript 作成 情報満載 
All About [JavaScript] All About [ホームページ作成]

サンプルソース

<html>
<head>
<title>テーブルのセルを重ねて表示</title>
<style type="text/css">
<!--
#TBL{
position : absolute;
top :10px;
left :10px;
}


#Sell1{
width : 100px;
height : 100px;
top : 0px;
left : 0px;
position : absolute;
z-index : 1;
color : aqua;
background-color : red;
}


#Sell2{
width : 100px;
height : 100px;
top : 20px;
left : 20px;
position : absolute;
z-index : 2;
color : navy;
background-color : lime;
}


#Sell3{
width : 100px;
height : 100px;
top : 40px;
left : 40px;
position : absolute;
z-index : 3;
color : gray;
background-color : yellow;
}

#Sell4{
width : 100px;
height : 100px;
top : 60px;
left : 60px;
position : absolute;
z-index : 4;
color : yellow;
background-color : blue;
}

#Sell5{
width : 100px;
height : 100px;
top : 80px;
left : 80px;
position : absolute;
z-index : 5;
color : green;
background-color : fuchsia;
}

-->
</style>
</head>
<body>
<table id="TBL" border="1">
<tbody>
<tr>
<td id="Sell1" onmouseover="this.style.zIndex = 6" onmouseout="this.style.zIndex = 1">テーブル@</td>
<td id="Sell2" onmouseover="this.style.zIndex = 6" onmouseout="this.style.zIndex = 2">テーブルA</td>
<td id="Sell3" onmouseover="this.style.zIndex = 6" onmouseout="this.style.zIndex = 3">テーブルB</td>
<td id="Sell4" onmouseover="this.style.zIndex = 6" onmouseout="this.style.zIndex = 4">テーブルC</td>
<td id="Sell5">テーブルD</td>
</tr>
</tbody>
</table>
</body>
</html>

#TBL{
  position : absolute;
  top :10px;
  left :10px;
  }

作成したテーブルに id属性をつけます。TBL
position : absolute;//絶対位置
top :10px; left :10px;//テーブルの画面上の(上から、左から)の位置、
              数値を変えると任意の場所に配置することができます。

テーブルの各セルに id属性をつけます。Sell1.Sell2.Sell3.Sell4.Sell5
スタイルシートでそれぞれの id名 にスタイルを指定していきます。
  例 Sell1
#Sell1{
width : 100px;
height : 100px;
//セルの幅と高さ
top : 0px;
left : 0px;
//テーブル本体からの(top 上から、left 左から)のセルの位置
このサンプルではそれぞれの数値を 20px ずつ増やして各セルの重なりを実現しています。
position : absolute; //絶対位置
z-index : 1; //重なりを指定します。数値が大 きいほど手前に表示されます。
color : aqua;
background-color : red;
//文字色と背景色です。
 }
  このままではマウスポインタがセル乗っても重なりは変わりません。
onmouseoverイベントで一番手前に表示
   onmouseover="this.style.zIndex = 6"//セルの数より1つ多い数値
onmouseoutイベントで重なりを元に戻します
   onmouseout="this.style.zIndex = 1"//元の zIndex値

HTML テーブル( 表 ) の作成。
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。
テーブルの行の文字色,背景色を変えてハイライトします。

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

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