以前のブログでテーブルのヘッダーや左欄タイトル固定しながらスクロールできる方法を掲載しました。
ここは前の記事参照しながら、よりきれいデザインしたものです。
コピペで利用できるので、ぜひお試してみてください。
ここは前の記事参照しながら、よりきれいデザインしたものです。
コピペで利用できるので、ぜひお試してみてください。
<html>
<head>
<title>テーブルヘッダー固定で左右スクロールサンプル</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
@charset "utf-8";
/*************************************************
* 共通定義
**************************************************/
:root {
--view-width: 980px;/* サイトの幅 */
--base-color: #FFF;/* 背景色や余白など*/
--main-color: #0d70f3; /* メインカラー：印象色 */ /* 2577e3,1d53a4*/
--accent-color: blue;/* アクセントカラー:強調色 */
--color-from: #2FCDED;/* 色変化（開始色） */
--color-to: #1d53a4;/* 色変化（終了色） 0062B8*/
--border-color: #CCC;/* 枠の色（デフォルト） */
--border-color-on: #1d53a4;/* 枠の色(active、オン) 0062B8*/
--border-color-focus: #00f;
--txt-color: #222;/* 文字の色（デフォルト） */
--txt-color-on: #FFF;/* 文字の色（背景色付きの場合） */
--device-sp-width: 768px;/* スマホ幅 */
--device-tablet-width: 1024px;/* タブレート幅 */
--width-side-menu: 18%;
--width-main-content: 64%;
}
/* 基本のテーブル定義 */
.Table--base {
border-collapse: collapse;
border: 0px solid #000;
table-layout: fixed;
box-sizing: border-box;
}
.Table--base tr {
height: 28px;
}
.Table--base th,
.Table--base td {
border: 1px solid #000;
height: 100%;
color: #222;
color: var(--txt-color);
}
.Table--base th{
background-color: lightBlue;
}
.Table--base tr:nth-child(odd) td {
background-color:#C8C8E8;
}
.Table--base tr:nth-child(even) td {
background-color:#E8E8FF;
}
/* 外枠 */
.Fix-table {
--border-color: #000;
--txt-color: #222;
}
.Fix-table {
position: relative;
width: 300px;
height: 200px;
background-color: transparent;
border: 2px solid #222;
border: 2px solid var(--txt-color);
box-sizing: border-box;
display: inline-block;
}
@media screen and (max-width: 680px) {/* responsive css */
.Fix-table {
width: 100%;
}
}
/* スクロール部品 */
.Fix-table__hv,
.Fix-table__v,
.Fix-table__h,
.Fix-table__scroll {
position: absolute;
z-index: 1;
box-sizing: border-box;
}
/* 左側の部品 */
.Fix-table__hv,
.Fix-table__v {
width: 90px;
left: 0;
}
/* 右側の部品 */
.Fix-table__h,
.Fix-table__scroll {
width: 210px;
width: calc(100% - 90px);
left: 90px;
}
/* 上部の部品 */
Fix-table__hv,
Fix-table__h {
top: 0px;
z-index: 2;
}
/* 下部の部品 */
.Fix-table__v,
.Fix-table__scroll {
top: 27px;
height: 172px;
height: calc(100% - 27px);
}
/* (左上)固定 */
.Fix-table__hv {
}
/* (左下)上下移動＆左右固定 */
.Fix-table__v {
overflow-x: hidden;
overflow-y: hidden;
height: calc(100% - 43px);//スクロールバー高さのため
}
/* (右上)左右移動＆垂直固定 */
.Fix-table__h {
overflow-x: hidden;
overflow-y: hidden;
width: calc(100% - 107px);//スクロールバー幅のため
}
/* (右下)左右＆上下スクロール */
.Fix-table__scroll {
overflow-x: scroll;
overflow-y: scroll;
z-index: 0;
}
.Fix-table > div > table {
width: 100%;
box-sizing: border-box;
}
.Fix-table__h th,
.Fix-table__h td,
.Fix-table__scroll th,
.Fix-table__scroll td {
width: 90px;
}
/* セルの線の整形 */
.Fix-table__hv .Table--base td,
.Fix-table__hv .Table--base th {
border-left: none;
border-top: none;
}
.Fix-table__v .Table--base td,
.Fix-table__v .Table--base th {
border-left: none;
}
.Fix-table__h .Table--base td,
.Fix-table__h .Table--base th {
border-top: none;
}
.Fix-table__h .Table--base td:last-child,
.Fix-table__h .Table--base th:last-child {
/*border-right: none;*/
}
/* スクロールバー */
::-webkit-scrollbar {
width: 17px;
}
::-webkit-scrollbar:horizontal {
height: 17px;
}
/* Track */
::-webkit-scrollbar-track {
box-shadow: inset 0 0 5px grey;
/*border-radius: 5px;*/
}
/* Handle */
::-webkit-scrollbar-thumb {
background: gray;
/*border-radius: 5px;*/
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
background: blue;
}
/* 以下は自由にカスタマイズ */
.Fix-table__h th:last-child,
.Fix-table__scroll td:last-child {
width: 350px;
}
</style>
</head>
<body>
<!-- ヘッダー固定＆左右スクロール開始 -->
<div class="Fix-table">
<!-- 固定 -->
<div id="fix-hv" class="Fix-table__hv">
<table class="Table--base" >
<tr>
<th>社員番号</th>
</tr>
</table>
</div>
<!-- 水平ヘッダ：左右移動＆上下固定-->
<div id="fix-h" class="Fix-table__h">
<table class="Table--base">
<tr>
<th>名前</th>
<th>性別</th>
<th>年齢</th>
<th>職位</th>
</tr>
</table>
</div>
<!-- 垂直ヘッダ：上下移動＆左右固定 -->
<div id="fix-v" class="Fix-table__v">
<table class="Table--base">
<tr><th>1</th></tr>
<tr><th>2</th></tr>
<tr><th>3</th></tr>
<tr><th>4</th></tr>
<tr><th>5</th></tr>
<tr><th>6</th></tr>
<tr><th>7</th></tr>
<tr><th>8</th></tr>
<tr><th>9</th></tr>
<tr><th>10</th></tr>
<tr><th>11</th></tr>
<tr><th>12</th></tr>
<tr><th>13</th></tr>
</table>
<span style="height:28px;"> </span>
</div>
<!-- 上下＆左右 スクロールデータ -->
<div id="scroll-data" class="Fix-table__scroll">
<table class="Table--base">
<tr><td><a href="http://www.matao.me">matao.me</a></td><td>男</td> <td>33</td> <td>PM</td></tr>
<tr><td>zanmai.net</td><td>男</td><td>12</td><td>PG</td></tr>
<tr><td><a href="http://www.zanmai.net">zanmai.net</a></td><td>男</td><td>13</td><td>PM</td></tr>
<tr><td>baido.jp</td><td>男</td><td>14</td><td>SE</td></tr>
<tr><td>zanmai2</td><td>女</td><td>15</td><td>SE</td></tr>
<tr><td><a href="http://www.benri.jp">benri.jp</a></td><td>女</td><td>33</td><td>PM</td></tr>
<tr><td>hymama</td><td>女</td><td>33</td><td>PM</td></tr>
<tr><td>zanmai</td><td>男</td><td>12</td><td>PG</td></tr>
<tr><td>xiecheng</td><td>男</td><td>13</td><td>PM</td></tr>
<tr><td>baido</td><td>男</td><td>14</td><td>SE</td></tr>
<tr><td>zanmai2</td><td>女</td><td>15</td><td>SE</td></tr>
<tr><td>zanmai2</td><td>女</td><td>15</td><td>SE</td></tr>
</table>
</div>
</div>
<!-- //ヘッダー固定＆左右スクロールEND -->
<script type="text/javascript">
/*
* 要素IDのDOMオブジェクト取得
*/
function Getter(id){
return document.getElementById(id);
}
/*
* スクロールの際にテーブル上下・左右に連動
*/
function scroll(){
// 左右連動させる
Getter("fix-h").scrollLeft= Getter("scroll-data").scrollLeft;
// 上下連動させる
Getter("fix-v").scrollTop = Getter("scroll-data").scrollTop;
}
//スクロールを監視する
Getter("scroll-data").onscroll = scroll;
</script>
</body>
</html>
最新のコメント @zanmai.net
aaad @2016年03月31日
» 助かりました。ありがとう。
tinghai @2015年02月24日
» インストールしたJDKのbinディレクトリに移動してから、コマンドを実…
zanmai @2015年01月30日
» 返信が大変遅れまして、すみません。…
zanmai @2015年01月30日
» 返信が大変遅れまして、すみません。…
iPhone6plus @2015年01月28日
» その同期するめーるの期間というところがでてきません。アカウント削除しか…
admin @2015年01月26日
» mysql起動失敗の場合、mysqld --standalone…
iphone6 plus @2014年11月03日
» 図で分かりやすい。助かりました。
ありがとう
iphone6 @2014年10月04日
» iphone6の設定も同じだね
asika @2014年09月25日
» 勉強になりました。ありがとう。
zanmai @2016年03月31日
» ①②③④の順で設定できるはず。…