分享

◇データ部だけスクロールするTABLE;HTMLメモ:万象酔歩

 反反复复奋斗 2017-02-24
でまとめます
ただし、ヘッダ用の方にはスクロール領域文の空カラム(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)
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のセットは

原子番号元素英語記号原子量
1 水素 Hydrogen H 1.00794 (7)
2 ヘリウム Helium He4.002603 (2)
3 リチウム Lithium Li[6.941 (2)]
4 ベリリウムBeryllium Be9.012182 (3)

リストはコピペで動作することを確認してあります。念のためファイルも置きます。

右クリックで「対象をファイルに保存」でダウンロードできます。

本当にTBODYのoverflow属性は無効なのか

ちょっと信じ難いので、少し調べます。もし有効なら、この記事をupdateします。

テーブルの内容は

この記事の本質ではありませんが、テーブルの内容は「理科年表」から得ました。

なにぶん、「右のものを左に移す」という作業が苦手なので、テーブルの値自体は信用しないでください。

ところで、「理科年表」の英フォントってとても見づらいと感じるのは僕だけなんでしょうか?
例えば、(エム)とrn(アールエヌ)の区別がつかない。例えば、大文字の幅が広すぎるし、カーニングの仕方もおかしい。等々。
小さい版ではなく机上版でも見づらい。
歳をとって目が悪くなって来たからではなく、子供の頃から変だなあと思っていました。(途中で一回フォントが変わったような気もしていますが、気のせいかもしれません)

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    来自: 反反复复奋斗 > 《待分类》

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多
    喜欢该文的人也喜欢 更多
    热门阅读 换一换