ホーム » ブログ » テーブルのヘッダーや左欄タイトルを固定でスクロール方法
このエントリーをはてなブックマークに追加
@2018/08/10

スポンサーリンク
以前のブログでテーブルのヘッダーや左欄タイトル固定しながらスクロールできる方法を掲載しました。
ここは前の記事参照しながら、よりきれいデザインしたものです。
コピペで利用できるので、ぜひお試してみてください。

<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;">&nbsp;</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>

♪ 当記事がお役に立ちましたらシェアして頂ければ嬉しいです。
0人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


※会員の方は認証コードを要らないから、新規登録をオススメ!

check