ホーム » ブログ » テーブルのヘッダーや左欄タイトルを固定でスクロール方法
このエントリーをはてなブックマークに追加
@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人
このエントリーをはてなブックマークに追加


★ 当記事を閲覧の方は下記の【関連記事】も閲覧していました。
RitaSuanet 様
コメント@2018年11月21日
Gravatar-グローバルに認識されるアバター_zanmai.net
日本腎臓学会|Japanese Society of Nephrology 日本腎臓学会は腎臓学研究の進歩と知識の普及、国民への還元を目的としています。 <a href=https://jamedbook.com/534-2/>https://jamedbook.com/534-2/</a> 今日では十二指腸潰瘍の多くはヘリコバクター・ピロリの除菌によって再発を予防できると考えられるようになり、胃潰瘍の再発についてもヘリコバクター・ピロリの除菌によって再発率を低下させることができると考えられています。

お名前:

 

EMAIL:

 

URL:

 

認証コード:

zanmai.net-safecode

 


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

check