| テーブル① | テーブル② | テーブル③ | テーブル④ | テーブル⑤ |
普通に表示すると上のように見えるテーブル（表）ですが
スタイルシート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">テーブル②</td>
<td id="Sell3" onmouseover="this.style.zIndex = 6" onmouseout="this.style.zIndex
= 3">テーブル③</td>
<td id="Sell4" onmouseover="this.style.zIndex = 6" onmouseout="this.style.zIndex
= 4">テーブル④</td>
<td id="Sell5">テーブル⑤</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"//セルの数より１つ多い数値
onmouseoutイベントで重なりを元に戻します
onmouseout="this.style.zIndex = 1"//元の zIndex値
HTML テーブル( 表 ) の作成。
テーブルの表題を固定してデータ部分だけをスクロールさせる。
テーブルの行の背景色を一行おきに変えます。
テーブルの行の文字色,背景色を変えてハイライトします。
