余裕があるよりも多くのテーブル列を表示する最良の方法は？
私が働いているWeb開発オフィスは、固定幅のWebサイトで作業しています。 1ページに、960pxの固定スペース内にテーブルがあります。これまでのところ、このテーブルはうまく機能しましたが、使用しているデータには実際には他の多くのフィールドが含まれているため、余裕のある列の約3倍を表示できます。スペースが限られているため、ユーザーに提供できるすべてのデータを表示できません。
これまで説明してきたアイデアの1つは、Webサイト全体を全幅にして、CSS3メディアクエリを使用して、使用可能なスペースの増減に応じてテーブルの列を表示/非表示にすることです。 1つのページでのユーザビリティの問題に対処するためにWebサイトのレイアウト全体を変更したくないので、私はこのアイデアがあまり好きではありません。人々が議論している別のオプションは、テーブルをすべてのユーザーが利用できるように、スクロールdiv内にテーブルを配置することです。すばらしいjQueryプラグインはすべて揃っているので、これらの2つのオプションよりも優れた方法があるはずです。
固定幅レイアウト内のテーブルに表示する余地がある列より多くの列を表示する最良の方法は何ですか？
どの人に何を見せようとしているのかを考えるまで、レスポンシブなアイデアは良さそうです。レスポンシブデザインとは、適切な情報を適切なデバイスに表示することであり、スペースが不足したためにCSSメディアクエリを悪用することではありません。代わりに、一歩下がって本当の問題を見てください。十分なスペースがないだけです。
いくつかのオプションが思い浮かびます：
その1ページのレイアウトを変更するだけです。なぜ1ページのWebサイト全体を変更するのですか？そのページを変更するだけです。すべてのページが常に同じに見えるようにする必要があるというウェブデザインの普遍的な法則はありません。ここでの良い経験則は 一貫性よりもコンテキスト です。
テーブルを90度回転します。列が多すぎて数行しかない場合は、行を列に、列を行に変えて、水平スペースではなく垂直スペースを使用できるようにテーブルを再設計してください。
列を表示/非表示にするコントロールを追加します。テーブルでユーザーが列間のデータを比較できる場合は、Windowsエクスプローラーに似た表示/非表示コントロールを追加して、ユーザーが見たい列を決定できるようにすることを検討してください。現在の設計が混雑している場合、これは実際に現在の設計よりも改善される可能性があり、関連データのみを表示するように列の数を減らすとユーザーに役立ちます。
テーブルを分割します。表示しようとしている情報を分解し、すべてを1つのテーブルに詰め込む必要があるかどうかを自問してください。多くの場合、そうではありません。情報を表示する方法はいくつかあります。列の数が少ない複数のテーブルを使用できる別の方法でデータをグループ化できるかどうかを確認します。
ポップアウト行を使用して、余分なデータを明らかにします。ユーザーがアクションを実行するために必要な最低限の行まで表を折りたたみ、行ごとに詳細情報を表示できるようにするコントロールを提供します。これは、行間でデータを比較する必要があるが、テーブル内のすべての行を一度に見たくない場合に役立ちます。
可能な場合は列を結合します。独自の列にデータを配置する代わりに、列をマージしてスペースを節約するだけでなく、関連データをまとめて読みやすくすることができる場所を確認してください。
列の内容を書き換え、可能な場合はアイコンを使用します。略語まで短くして、繰り返しの多いテキストを、簡単にスキャンできる簡潔なアイコンに置き換えます。
Outlook 2007や2010のような結果には複数行レイアウトを使用できます（設定では「コンパクトレイアウト」と呼ばれます）。
結果は表ではなく設計されたリストのように見えますが、それはしばしば良いことだと思います。