QA@IT

HTML 縦横スクロールについて

7416 PV

HTML初心者です。
tableタグとCSSを使って以下の画像のようなtableを作成したい考えています。
tableタブを3つ使えば動きそうな気がしているのですが、それ以上まったく思いつきません。
皆様のお知恵をかしてください。

全行は縦スクロールで移動。
2列以降のみ横スクロールで移動。
(1列目は縦スクロールで移動するが横スクロール時は固定)

■ 実行環境
OS:Windows7(64bit)
ブラウザ:IE11 のみ

test.jpg

  • 自分の勉強のためとかの理由で全て自力でコードを書いて作りたいということですか? それとも、質問に書いてあることが実現できれば第三者が提供する JavaScript ライブラリやプラグインを使ってもよいということですか? -
  • なるべく、html+cssで実現したいのですが無理なようならJavaScript ライブラリやプラグインでも構いません。何卒、よろしくお願いします。 -

回答

>tableタブを3つ使えば動きそうな気がしているのですが、それ以上まったく思いつきません。

まずはご自分で実践されて見ては如何ですか?その上での問題点があれば解決方法はあると思います。

編集 履歴 (0)

html+cssで実現したいのですが無理なようならJavaScript ライブラリやプラグインでも構いません。

無理かどうかは分かりませんが、自分で作るのは大変です。第三者が作ったライブラリやプラグインに使えるものがあれば、それを利用した方がよさそうです。

自分が使ったことがあるのは以下の 3 つですが、探せば他にも見つかると思います。

mmurph211/Grid
https://github.com/mmurph211/Grid

DataTables
https://datatables.net/

w2ui Grid
http://w2ui.com/web/demo/grid

質問者さんのやりたいことに一番近いのは、一番上の mmurph211/Grid ではないかと思います。

詳しい解説は以下の記事を見てください。そのページの「実験室」というリンクをクリックするとデモがありますので、興味がありましたら見てください。

GridView のヘッダ、列を固定(その 2)
http://surferonwww.info/BlogEngine/post/2013/02/04/freezing-header-and-column-of-gridview-by-using-javascript-gridjs.aspx

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。