原子番号元素英語記号原子量
1 水素 Hydrogen H 1.00794 (7)
2 ヘリウム Helium He4.002603 (2)
3 リチウム Lithium Li[6.941 (2)]
4 ベリリウムBeryllium Be9.012182 (3)
5 ホウ素 Boron B 10.811 (7)
6 炭素 Carbon C 12.0107 (8)
7 窒素 NitorogenN 14.0067 (2)
8 酸素 Oxygen O 15.9994 (3)
9 フッ素 Fluorine F 18.9984032 (5)
10ネオン Neon Ne20.1797
11ナトリウムSodium Na22.98976928 (2)
12マグネシウムMagnesiumMg 24.3050 (6)
13アルミニウムAlminiumAl26.9815386 (8)
縦横スクロールは
TABLEヘッダを隠さず縦横スクロールへ
HTMLのTABLEで値部だけをスクロールする
HTMLのTABLEを使っていて、ヘッダを固定のまま、値部だけをスクロールしたいことはめっちゃくちゃ頻繁にあります。
あって当然の機能です。無いのがどうかしている。
ごく普通に考えるとcssでTBODYにoverflow属性を与えればよいだけです。
んが！それでは動きません。css3でもできません。HTML5はいったいどこへ行こうとしているのか全く不明です。
で、汚く自作せざるを得ないハメに陥ります(探せばライブラリなどがあるのかな？)
力技で作ってみました。
ヘッダ用とボディー用のテーブルを別に作り、ボディー用のテーブルをdivのスクロール機能でスクロールさせようというものです。
原子番号元素英語記号原子量
1 水素 Hydrogen H 1.00794 (7)
2 ヘリウム Helium He4.002603 (2)
3 リチウム Lithium Li[6.941 (2)]
4 ベリリウムBerylliumBe9.012182 (3)
5 ホウ素 Boron B 10.811 (7)
6 炭素 Carbon C 12.0107 (8)
7 窒素 NitorogenN 14.0067 (2)
8 酸素 Oxygen O 15.9994 (3)
9 フッ素 Fluorine F 18.9984032 (5)
10ネオン Neon Ne20.1797
11ナトリウムSodium Na22.98976928 (2)
12マグネシウムMagnesiumMg 24.3050 (6)
13アルミニウムAlminiumAl26.9815386 (8)
ボディー部のdivでボディー部全体の高さを設定します。この例ではheigth:120pxです。
ヘッダテーブルとボディーテーブルには同じcolのセットを与え、位置が揃うようにします。colのセットはでまとめます
ただし、ヘッダ用の方にはスクロール領域文の空カラム(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でもスクロールハンドルはでません。
なお、データ数が少ない場合は以下のような表示となります。
原子番号元素英語記号原子量
1 水素 Hydrogen H 1.00794 (7)
2 ヘリウム Helium He4.002603 (2)
3 リチウム Lithium Li[6.941 (2)]
4 ベリリウムBeryllium Be9.012182 (3)
リストはコピペで動作することを確認してあります。念のためファイルも置きます。
tableScrollTest.html右クリックで「対象をファイルに保存」でダウンロードできます。
本当にTBODYのoverflow属性は無効なのか
ちょっと信じ難いので、少し調べます。もし有効なら、この記事をupdateします。
テーブルの内容は
この記事の本質ではありませんが、テーブルの内容は「理科年表」から得ました。
なにぶん、「右のものを左に移す」という作業が苦手なので、テーブルの値自体は信用しないでください。
ところで、「理科年表」の英フォントってとても見づらいと感じるのは僕だけなんでしょうか？
例えば、ｍ（エム）とrn（アールエヌ）の区別がつかない。例えば、大文字の幅が広すぎるし、カーニングの仕方もおかしい。等々。
小さい版ではなく机上版でも見づらい。
歳をとって目が悪くなって来たからではなく、子供の頃から変だなあと思っていました。（途中で一回フォントが変わったような気もしていますが、気のせいかもしれません）
