表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示する方法｜DAD UNION

jquery.fixedTblHdrLftCol.jsを使って、表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示する方法をご紹介します。
HTMLページでも表（table）が縦長or横長になると先頭行が見えなくなるので、そんな時に使えます。

Contents

表（table）をエクセルの「ウィンドウ枠の固定」の様に表示するCSS記述
表（table）をエクセルの「ウィンドウ枠の固定」の様に表示するHTML記述
jquery.fixedTblHdrLftCol.jsを使って、表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示するJavaScriptの記述
表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示するデモページ
ソース元：fixedTblHdrLftCol

表（table）をエクセルの「ウィンドウ枠の固定」の様に表示するCSS記述

※表（table）と「ウィンドウ枠の固定」後のエリア（div.fTHLC-xxxxx）のCSS記述です。必要に応じて変更して下さい。

<style>
body {
  margin: 0;
  padding: 0;
  font-size: 18px;
  text-align: center;
}
h1{
  text-align: center;
  font-size: 20px;
  line-height: 2em;
  padding: 30px 0 20px 0;
}
thead th {
  height: 30px;
  width: 100px;
  padding: 0 5px;
  line-height: 30px;
  border-right: dotted 1px #000000;
}
thead th:first-child {
  width: 80px;
}
tbody td {
  word-break: break-all;
  padding: 5px;
  border: 0;
  width: 100px;
  vertical-align: top;
  border-bottom: dotted 1px #000000;
  border-right: dotted 1px #000000;
}
tbody td:first-child {
  width: 80px;
}
div.fTHLC-outer-wrapper {
  border: 1px solid #000000;
  margin: 50px auto;
}
div.fTHLC-inner-wrapper {
  border: 1px dotted #000000;
}
div.fTHLC-outer-corner {
  background-color: #ffffff;
  border-right: 1px solid #000000;
  border-bottom: 1px solid #000000;
}
</style>

表（table）をエクセルの「ウィンドウ枠の固定」の様に表示するHTML記述

※多数「行」と「列」がある表（table）を用意します。

<h1>表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示します。<br>以下の表を左右にスクロールしてみてください。</h1>

    <table id="demo1">
      <thead>
        <tr>
          <th>表</th><th>1列</th><th>2列</th><th>3列</th><th>4列</th><th>5列</th><th>6列</th><th>7列</th><th>8列</th><th>9列</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1行</td><td>1の1</td><td>1の2</td><td>1の3</td><td>1の4</td><td>1の5</td><td>1の6</td><td>1の7</td><td>1の8</td><td>1の9</td>
        </tr>
        <tr>
          <td>2行</td><td>2の1</td><td>2の2</td><td>2の3</td><td>2の4</td><td>2の5</td><td>2の6</td><td>2の7</td><td>2の8</td><td>2の9</td>
        </tr>
        <tr>
          <td>3行</td><td>3の1</td><td>3の2</td><td>3の3</td><td>3の4</td><td>3の5</td><td>3の6</td><td>3の7</td><td>3の8</td><td>3の9</td>
        </tr>
        <tr>
          <td>4行</td><td>4の1</td><td>4の2</td><td>4の3</td><td>4の4</td><td>4の5</td><td>4の6</td><td>4の7</td><td>4の8</td><td>4の9</td>
        </tr>
        <tr>
          <td>5行</td><td>5の1</td><td>5の2</td><td>5の3</td><td>5の4</td><td>5の5</td><td>5の6</td><td>5の7</td><td>5の8</td><td>5の9</td>
        </tr>
        <tr>
          <td>6行</td><td>6の1</td><td>6の2</td><td>6の3</td><td>6の4</td><td>6の5</td><td>6の6</td><td>6の7</td><td>6の8</td><td>6の9</td>
        </tr>
        <tr>
          <td>7行</td><td>7の1</td><td>7の2</td><td>7の3</td><td>7の4</td><td>7の5</td><td>7の6</td><td>7の7</td><td>7の8</td><td>7の9</td>
        </tr>
        <tr>
          <td>8行</td><td>8の1</td><td>8の2</td><td>8の3</td><td>8の4</td><td>8の5</td><td>8の6</td><td>8の7</td><td>8の8</td><td>8の9</td>
        </tr>
        <tr>
          <td>9行</td><td>9の1</td><td>9の2</td><td>9の3</td><td>9の4</td><td>9の5</td><td>9の6</td><td>9の7</td><td>9の8</td><td>9の9</td>
        </tr>
        <tr>
          <td>10行</td><td>10の1</td><td>10の2</td><td>10の3</td><td>10の4</td><td>10の5</td><td>10の6</td><td>10の7</td><td>10の8</td><td>10の9</td>
        </tr>
        <tr>
          <td>11行</td><td>11の1</td><td>11の2</td><td>11の3</td><td>11の4</td><td>11の5</td><td>11の6</td><td>11の7</td><td>11の8</td><td>11の9</td>
        </tr>
        <tr>
          <td>12行</td><td>12の1</td><td>12の2</td><td>12の3</td><td>12の4</td><td>12の5</td><td>12の6</td><td>12の7</td><td>12の8</td><td>12の9</td>
        </tr>
        <tr>
          <td>13行</td><td>13の1</td><td>13の2</td><td>13の3</td><td>13の4</td><td>13の5</td><td>13の6</td><td>13の7</td><td>13の8</td><td>13の9</td>
        </tr>
        <tr>
          <td>14行</td><td>14の1</td><td>14の2</td><td>14の3</td><td>14の4</td><td>14の5</td><td>14の6</td><td>14の7</td><td>14の8</td><td>14の9</td>
        </tr>
        <tr>
          <td>15行</td><td>15の1</td><td>15の2</td><td>15の3</td><td>15の4</td><td>15の5</td><td>15の6</td><td>15の7</td><td>15の8</td><td>15の9</td>
        </tr>
        <tr>
          <td>16行</td><td>16の1</td><td>16の2</td><td>16の3</td><td>16の4</td><td>16の5</td><td>16の6</td><td>16の7</td><td>16の8</td><td>16の9</td>
        </tr>
        <tr>
          <td>17行</td><td>17の1</td><td>17の2</td><td>17の3</td><td>17の4</td><td>17の5</td><td>17の6</td><td>17の7</td><td>17の8</td><td>17の9</td>
        </tr>
        <tr>
          <td>18行</td><td>18の1</td><td>18の2</td><td>18の3</td><td>18の4</td><td>18の5</td><td>18の6</td><td>18の7</td><td>18の8</td><td>18の9</td>
        </tr>
      </tbody>
    </table>

jquery.fixedTblHdrLftCol.jsを使って、表（table）をエクセルの「ウィンドウ枠の固定（先頭行の固定、先頭列の固定）」の様に表示するJavaScriptの記述

※jquery-2.1.4.min.js、jquery.fixedTblHdrLftCol.jsファイルを読み込みます。$(‘表エリア’).fixedTblHdrLftCol({オプション})を記述します。オプションには表の縦・横サイズや固定箇所（列 or 行）の指定が出来ます。

<script src="jquery-2.1.4.min.js"></script>
<script src="jquery.fixedTblHdrLftCol.js"></script>
<script>
      $(function() {
        $('#demo1').fixedTblHdrLftCol({
          scroll: {
            height: '200px',
            width: '330px'
          }
        });

      });
</script>