@charset "utf-8";

body {
margin: 20px;
}

/* wrapperで幅、中央寄せ、背景色一括指定 */
#wrapper {
	width: 800px;
	margin: 50px auto;
	padding: 30px;
	background: #fff;
	border: 1px #ccc solid ;
}

/* 表示する文字がはみ出た場合のみスクロールバーを表示する */
div.samplebox {
  width:150px;
  height:80px;
  border:1px solid #808080;
  overflow:auto;
}

/* ---------------------------------------------  【table class="yoko"】
	【1】テーブル 行（横軸）を固定してスクロールする
---------------------------------------------------------------- */

/* テーブルがはみ出さないように枠を設定
枠からはみ出た部分（横）にスクロールバー */
div.fixed-box-yoko {
  width:750px;
  height:330px;
  border:1px solid #008740;
  background: #fff;
  overflow:auto;
}
/*-------------------------▼ここからテーブル【table class="yoko"】▼- */
table.yoko {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

table.yoko th, table.yoko td {
  height: 100px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}

table.yoko .fixed01 {
  position: sticky;
  top: 0;
  color: #fff;
  background: #008740;
  height: 100px;
}
table.yoko .fixed01:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}


/* -------------------------------------------  【table class="tate"】
	【2】テーブル 列（縦軸）を固定してスクロールする
---------------------------------------------------------------- */

/* テーブルがはみ出さないように枠を設定
枠からはみ出た部分（縦）にスクロールバー */
div.fixed-box-tate {
  width:750px;
  height:100%;
  background: #fff;
  border:1px solid #2e79b5;
  overflow:auto;
}
/* -----------------------▼ここからテーブル【table class="tate"】▼- */
table.tate {
  width: 1200px;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

table.tate th, table.tate td {
  width: 200px;
  height: 70px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}

table.tate .fixed01 {
  position: sticky;
  left: 0;
  color: #fff;
  background: #2e79b5;

}
table.tate .fixed01:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}



/* -------------------------------------------  【table class="yoko-tate"】
	【3】行（縦軸）と列（縦軸）どちらも固定してスクロールする
---------------------------------------------------------------- */


/* テーブルがはみ出さないように枠を設定
枠からはみ出た部分（縦・横）にスクロールバー */
div.fixed-box-yoko-tate {
  width:750px;
  height:450px;
  background: #fff;
  border:1px solid #dc6000;
  overflow:auto;
}
/* -----------------------▼ここからテーブル【table class="yoko-tate"】【3】▼- */
table.yoko-tate {
  width: 1840px;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

table.yoko-tate th, table.yoko-tate td {
  width: 230px;
  height: 100px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}

table.yoko-tate .fixed01,
table.yoko-tate .fixed02 {
  position: sticky;
  top: 0;
  left: 0;
  color: #fff;
  background: #dc6000;
}
table.yoko-tate .fixed01:before,
table.yoko-tate .fixed02:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

table.yoko-tate .fixed01 {
  z-index: 2;
}

table.yoko-tate .fixed02 {
  z-index: 1;
}

/* -------------------------------------------  【table class="tatetocyu"】
	【4】特定の列（横軸）を途中で固定する
---------------------------------------------------------------- */

/* テーブルがはみ出さないように枠を設定
枠からはみ出た部分（縦・横）にスクロールバー */
div.fixed-box-tatetocyu {
  width:750px;
  height:100%;
  background: #fff;
  border:1px solid #e6e6e6;
  overflow:auto;
}

/* -----------------------▼ここからテーブル【table class="tatetocyu"】▼- */
table.tatetocyu {
  width: 1600px;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

table.tatetocyu th,
table.tatetocyu td {
  width: 200px;
  height: 100px;
  vertical-align: middle;
  padding: 0 15px;
  border: 1px solid #ccc;
}

table.tatetocyu .fixed01 {
  position: sticky;
  color: #fff;
  background: #333;
}

table.tatetocyu .fixed02 {
  position: sticky;
  color: #fff;
  background: #737373;
}

table.tatetocyu .fixed01:before,
table.tatetocyu .fixed02:before {
  content: "";
  position: absolute;
  top: -1px;
  left: -1px;
  width: 100%;
  height: 100%;
  border: 1px solid #ccc;
}

table.tatetocyu .fixed01 {
  left: 0;
}

table.tatetocyu .fixed02 {
  left: 199px;
}