◇データ部だけスクロールするTABLE；HTMLメモ
| 原子番号 | 元素 | 英語 | 記号 | 原子量 |
|---|
縦横スクロールは TABLEヘッダを隠さず縦横スクロールへ
HTMLのTABLEで値部だけをスクロールする
HTMLのTABLEを使っていて、ヘッダを固定のまま、値部だけをスクロールしたいことは
めっちゃくちゃ頻繁にあります。
あって当然の機能です。無いのがどうかしている。
ごく普通に考えるとcssでTBODYにoverflow属性を与えればよいだけです。
んが！それでは動きません。css3でもできません。
HTML5はいったいどこへ行こうとしているのか全く不明です。
で、汚く自作せざるを得ないハメに陥ります(探せばライブラリなどがあるのかな？)
力技で作ってみました。
ヘッダ用とボディー用のテーブルを別に作り、ボディー用のテーブル をdivのスクロール機能でスクロールさせようというものです。
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <html><head></head><body> <!-- tableの属性 --> <style type="text/css"> table.t {border:1px solid #000000; border-collapse:collapse;table-layout:fixed;font-size:12px;} table.t td{border:1px solid #000000;} table.t th{border:1px solid #000000;font-size:16px;vertical-align:middle; background-color:#FFBB88;color:#000000;} table.t tr:nth-child(odd) td{background-color:#C8C8E8;color:#000000;} table.t tr:nth-child(even) td{background-color:#E8E8FF;color:#000000;} </style> <!-- ========== テーブル全体を表す div ========== --> <div style="width:417px; border-style:solid;border-width:1px;"> <!-- ===== ヘッダ部(THEAD相当)を表す div ===== --> <div style="width:100%"> <table class=t> <colgroup> <col style='width:50px'> <col style='width:100px'> <col style='width:100px'> <col style='width:50px'> <col style='width:100px'> <col style='width:16px'> </colgroup> <thead> <tr> <th>原子番号</th><th>元素</th><th>英語</th><th>記号</th><th>原子量</th> <th></th> </tr> </thead> </table> </div> <!-- ===== ボディー部(TBODY相当)を表す div ===== --> <div style="height:120px; width:100%;overflow-y:scroll;overflow-x:hidden;background:#BBBBBB"> <table class=t> <colgroup> <col style='width:50px'> <col style='width:100px'> <col style='width:100px'> <col style='width:50px'> <col style='width:100px'> </colgroup> <tbody> <tr><td>1</td> <td>水素</td> <td>Hydrogen</td> <td>H</td> <td>1.00794 (7)</td></tr> <tr><td>2</td> <td>ヘリウム</td> <td>Helium</td> <td>He</td><td>4.002603 (2)</td></tr> <tr><td>3</td> <td>リチウム</td> <td>Lithium</td> <td>Li</td><td>[6.941 (2)]</td></tr> <tr><td>4</td> <td>ベリリウム</td><td>Beryllium</td><td>Be</td><td>9.012182 (3)</td></tr> <tr><td>5</td> <td>ホウ素</td> <td>Boron</td> <td>B</td> <td>10.811 (7)</td></tr> <tr><td>6</td> <td>炭素</td> <td>Carbon</td> <td>C</td> <td>12.0107 (8)</td></tr> <tr><td>7</td> <td>窒素</td> <td>Nitorogen</td><td>N</td> <td>14.0067 (2)</td></tr> <tr><td>8</td> <td>酸素</td> <td>Oxygen</td> <td>O</td> <td>15.9994 (3)</td></tr> <tr><td>9</td> <td>フッ素</td> <td>Fluorine</td> <td>F</td> <td>18.9984032 (5)</td></tr> <tr><td>10</td><td>ネオン</td> <td>Neon</td> <td>Ne</td><td>20.1797</td></tr> <tr><td>11</td><td>ナトリウム</td><td>Sodium</td> <td>Na</td><td>22.98976928 (2)</td></tr> <tr><td>12</td><td>マグネシウム</td><td>Magnesium</td><td>Mg</td> <td>24.3050 (6)</td></tr> <tr><td>13</td><td>アルミニウム</td><td>Alminium</td><td>Al</td><td>26.9815386 (8)</td></tr> </tbody> </table> </div> </div> </body></html>
ボディー部のdivでボディー部全体の高さを設定します。この例ではheigth:120pxです。
ヘッダテーブルとボディーテーブルには同じcolのセットを
与え、位置が揃うようにします。colのセットは<colgroup>でまとめます
ただし、ヘッダ用の方にはスクロール領域文の空カラム(16px）を
最後に追加します。
全体のdivの中にヘッダ用とボディー用のdivを置き、ヘッダ用TABLEと
ボディー用テーブルをそれぞれ配置します。
divにはwidth属性をセットします。値は全カラム長の合計＋17です。
17はスクロール領域の幅+1です。
この例では50+100+100+50+100+17=417となります。
汚い長さ合わせをやってはありますが、IE9,Chrome,firefox,Windows版Safariでは
問題なく表示されました。
残念ながらOperaでは微妙にカラム位置がずれてしまいます。
iPadのSafariではスクロールハンドルが表示されず、データ部をドラッグして
スクロールする形になります。
残念ながらAndroidのChromeでもスクロールハンドルはでません。
なお、データ数が少ない場合は以下のような表示となります。
| 原子番号 | 元素 | 英語 | 記号 | 原子量 |
|---|
リストはコピペで動作することを確認してあります。念のためファイルも置きます。
右クリックで「対象をファイルに保存」でダウンロードできます。本当にTBODYのoverflow属性は無効なのか
ちょっと信じ難いので、少し調べます。もし有効なら、この記事をupdateします。
テーブルの内容は
この記事の本質ではありませんが、テーブルの内容は「理科年表」から得ました。
なにぶん、「右のものを左に移す」という作業が苦手なので、テーブルの値自体は 信用しないでください。
ところで、
「理科年表」の英フォントってとても見づらいと感じるのは僕だけなんでしょうか？
例えば、ｍ（エム）とrn（アールエヌ）の区別がつかない。
例えば、大文字の幅が広すぎるし、カーニングの仕方もおかしい。
等々。
小さい版ではなく机上版でも見づらい。
歳をとって目が悪くなって来たからではなく、子供の頃から変だなあと思っていました。
（途中で一回フォントが変わったような気もしていますが、気のせいかもしれません）
| 固定リンク