jquery.fixedTblHdrLftCol.jsを使って、表(table)をエクセルの「ウィンドウ枠の固定(先頭行の固定、先頭列の固定)」の様に表示する方法をご紹介します。
HTMLページでも表(table)が縦長or横長になると先頭行が見えなくなるので、そんな時に使えます。
Contents
ディスプレイ広告
表(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>
表(table)をエクセルの「ウィンドウ枠の固定(先頭行の固定、先頭列の固定)」の様に表示するデモページ
表(table)をエクセルの「ウィンドウ枠の固定(先頭行の固定、先頭列の固定)」の様に表示するデモページ
ソース元:fixedTblHdrLftCol
※流用される場合は自己責任でお願いします。
デモページheadタグ内のGoogleアナリティクスタグは流用しないで下さい。