earlgreyxxx/gridview.html

## gridview.html
<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
      /* グリッドコンテナ */
      #excel-grid {
        height: 500px;
        overflow: auto;
        font-size: .8rem;
        position: relative;
      }

      /* グリッドの各行のスタイル */
      #excel-grid > .row {
        display: grid;
        column-gap: 0px;
        row-gap: 0px;
        border-top: 1px solid #999;
        border-left: 1px solid #999;
      }

      /* グリッドヘッダの固定(position: sticky) */
      .row.head {
        font-weight: bold;
        border-bottom: 2px solid #ccc !important;
        position: -webkit-sticky !important;
        position: sticky !important;
        z-index: 2 !important;
        top:0 !important;
        background-color: #544a65;
        color:white;
      }

      /* セルのスタイル */
      .row > .cell {
        height: 1rem;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        border-bottom: 1px solid #999;
        border-right: 1px solid #999;
        display: block;
        padding: 5px;
      }

      /* グリッドヘッダのセル部分 */
      .head > .cell {
        padding: 10px 5px !important;
      }

      /*セル編集時のフォーカス表示*/
      .row > .cell.editing {
        outline: 3px solid #bdceff;
        box-shadow: 0 0 10px 2px royalblue;
      }

    </style>
    <!-- jQuery,SheetJS ライブラリのロード -->
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>
  </head>

  <body>
    <h1 class="header">
      <span>超手抜きグリッドビュー</span>
      <input type="file" id="select-file">
    </h1>

    <!-- グリッドエリア -->
    <div id="excel-grid">
      <div class="row head"></div>
      <div class="row body"></div>
    </div>

    <!-- スクリプト本体は下記参照 -->
    <script type="text/javascript" src="./show-sheet.js"></script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<style type="text/css">
	/* グリッドコンテナ */
	#excel-grid {
	height: 500px;
	overflow: auto;
	font-size: .8rem;
	position: relative;
	}

	/* グリッドの各行のスタイル */
	#excel-grid > .row {
	display: grid;
	column-gap: 0px;
	row-gap: 0px;
	border-top: 1px solid #999;
	border-left: 1px solid #999;
	}

	/* グリッドヘッダの固定(position: sticky) */
	.row.head {
	font-weight: bold;
	border-bottom: 2px solid #ccc !important;
	position: -webkit-sticky !important;
	position: sticky !important;
	z-index: 2 !important;
	top:0 !important;
	background-color: #544a65;
	color:white;
	}

	/* セルのスタイル */
	.row > .cell {
	height: 1rem;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	border-bottom: 1px solid #999;
	border-right: 1px solid #999;
	display: block;
	padding: 5px;
	}

	/* グリッドヘッダのセル部分 */
	.head > .cell {
	padding: 10px 5px !important;
	}

	/セル編集時のフォーカス表示/
	.row > .cell.editing {
	outline: 3px solid #bdceff;
	box-shadow: 0 0 10px 2px royalblue;
	}

	</style>
	<!-- jQuery,SheetJS ライブラリのロード -->
	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.15.5/xlsx.full.min.js"></script>
	</head>

	<body>
	<h1 class="header">
	<span>超手抜きグリッドビュー</span>
	<input type="file" id="select-file">
	</h1>

	<!-- グリッドエリア -->
	<div id="excel-grid">
	<div class="row head"></div>
	<div class="row body"></div>
	</div>

	<!-- スクリプト本体は下記参照 -->
	<script type="text/javascript" src="./show-sheet.js"></script>
	</body>
	</html>