web-dev-qa-db-ja.com

テーブルに多数の列を表示する

Twitter BootstrapレスポンシブCSSを使用したテーブルに基づいています。すべてが問題ありませんが、テーブルのサイズよりも多くの列を配置しようとすると、改行が発生します。変更しようとしましたフォントサイズですが、各テーブルで異なるフォントサイズを使用していると、ユーザーにとって奇妙で混乱を招くので、行き止まりになっています。

いくつかの制限:表の幅は940ピクセルを超えてはならず、情報を複数の表に分割することはできません。

これは私が持っているものです:

enter image description here

制限を考慮して表形式のデータを表示するより良い方法はありますか?

6
John

最初のオプション、他のパラメーターを変更したくない場合は、水平スクロールバーを実装できます。これは最良のオプションではありませんが、940ピクセルの幅を超えることなく、一貫したサイズでテーブル全体を表示(?)することができます。

2番目のオプションは、列を移動可能にします。範囲外の列を折り返す/くしゃくしゃにして、折り返し/くるみをクリックしたときにのみ展開されるようにします。このようにして、ユーザーはテーブルをカスタマイズして、興味のあるものだけを表示し、残りの情報は引き続き利用できますが、非表示にできます。

3番目のオプションは、情報の視覚化の道を進みます。テーブルの使用にまったくこだわっていない場合は、データのタイプと必要な出力に応じて、並列プロットなどの小さな倍数または多変量チャートを調べることができます。

9
rk.

たぶん"turn" the table? 2行と多くの列しかないようです。テーブルを回すと長くなりますが、収まります。

また、値のためのより多くのスペースを提供し、おそらくそれらがラップするのを防ぎます(これにより、値の読み取り/比較が困難になります)。

2
Kim Does