大きなテーブル列はレスポンシブデザインでどのように処理する必要がありますか？
この質問 に関連して、ユーザーが表形式のデータが豊富なページに表示される列を制御できるレスポンシブデザインテーマで何をすべきか興味があります。ユーザーは表示される列を操作できるため、他の質問の回答が示唆するように、データをいくつかの列に制限することはできません。潜在的な回避策は、私が設計した定義済みの列を使用してカスタムの「モバイル」クエリを設定することですが、ユーザーがこのビューを使用するかどうかを制御できません。
現在、各行の各列を積み重ねて中央に配置しています。スペースを無駄にし、整理されていないため、これはあまり良いデザインではないと思います。この問題に最もよく対処するにはどうすればよいですか？
私はredmineサーバーを持っています here これは私の問題を例示しています。ここにいくつかのスクリーンショットがあります。
デスクトップ：
モバイルビュー：
良い質問！いつものように、小さな画面エクスペリエンスに関しては、コア機能に集中する必要があります。削除できる列がどれであるかを自問し、それでも問題のないテーブルを表示し、ユーザーが関心のある追加の列を選択できるようにします。
このソリューションが役立つ場合があります： 複雑な複数列データテーブルのレスポンシブデザインアプローチ 。
それは本質的にすでに言われたことを推奨します：必須の列のみを使用してください...
...そして表示する列を決定するオプションをユーザーに提供します
この記事の良いところは、彼らがいくつかのコードをスローすることです。
更新：CSS-Tricksが Responsive Data Table Roundup記事 を公開しました。
データを数列に制限することはできないとおっしゃっていますので、インターフェースの設計をガイドするためにいくつかのヒューリスティックを提案します。
最初の列から開始し、他はすべて二次列です
キー列を左端に選択します。ユーザーは最初に識別子として探しますか？ここが主題です。次に、最も重要なマージンを確認します。ユーザーが最初に何を変更するかを探しますか？ユーザーはステータスの変更を探す可能性が高いため、ステータスが良い候補であると仮定しましょう。
ユーザーが水平方向にスクロールできるようにする
2列に制限することはできないと言うので、ユーザーは一度に1列ずつ右または左にスクロールできます。ただし、1つの列が本当に重要な場合は、それをロックして、他の列のみをスクロールします（ExcelまたはGoogleスプレッドシートの場合と同様）。
ユーザーが列の優先順位を並べ替えられるようにする
列の優先順位は、列が表示される順序を左から右に決定します。キー列の周りの選択に基づいてデフォルトから始めますが、それらを再配列させます。次に、それに応じて表示します。
その他
列ヘッダーをクリックして列をソートできるようにします。上部にフィルターを追加できるようにします。
提示したシナリオにはいくつかの暗黙の前提があり、徹底的に検討すると、決定が容易になります。
1データは表形式です。
クエリからレコードを返し、デフォルトでそれらをテーブルに表示しているからといって、UIの観点からはデータを「表形式」にしません。重要なのは、表形式の表示の主な機能は比較 1つ以上の項目特性による複数の設定項目であることです。データの分析を考えてください。テーブルでのグループ化と並べ替えは、単一のテーブルを使用してデータの分析を容易にする便利なオプションですが、比較の主要な機能の副次的なものです。
通常、リストは、いくつかの主要な特性に基づいて1つ以上の関心のあるアイテムを見つけるために、一連のデータを表示するのに適しています。データのリストを並べ替えてグループ化すると、関心のある項目をリストの先頭にバブリングして、「検索可能性」を向上させることができます。順序付きリストは1つ以上の特性によるソートを意味し、グループ化は複数の順次リストまたはサブリストによって実現されます。
私の意見では、リンクしたデータをざっと見て、データの使用の機会がより比較または発見であるかどうかを疑問に思うかもしれません。
2モバイルの使用例は基本的にデスクトップの使用例と同じです
これは、「迅速に対応する」という決定の根底にある大きな問題です。レスポンシブデザインは、主に（ほとんど）同じ情報をさまざまな画面サイズで表示することを目的としています。状況によっては、モバイルユースケース[コンテキスト、ユーザーの目標、情報のニーズ]がデスクトップのニーズと十分に異なるため、レスポンシブソリューションが1つ（または複数）のユーザーセットに許容できないレベルの妥協を強いています。これが発生した場合、個別のモバイルソリューションの方が適しています。
あなたの場合、最初にユースケースが同じかどうか、または異なるエクスペリエンスを設計する方が適しているかどうかを判断します。それらが同じである場合は、「表形式」データのユースケースを調べます。主にアイテムを見つける場合は、リストベースのソリューションを使用して、並べ替え/グループ化オプションを使用し、主要な関心の特性に注意を向けるのに役立つ場合は、リストアイテムを（おそらくモバイルでのみ）折りたたむ/展開します。
ユースケースが同じで、特性による複数のアイテムの比較がデータ表示の主な目的である場合、データを削除または非表示にして320pxに収まるようにテーブルを折りたたむのは、実際にはworseです。テーブル全体を水平方向にズームおよび/またはスクロールするよりも、ユーザーにとって。このシナリオでは、完全にレスポンシブなデザインは適切ではありません。
長文の応答でごめんなさい-これがあなたが選択をするのに役立つことを願っています。
レスポンシブ/アダプティブテーブル
私は最近、この純粋なCSS/Bootstrapソリューションをモバイルユーザー向けに作成しました。主に4〜5列のテーブルで最適に機能します。 3列は、深刻な切り捨てが発生する前にモバイルデバイスで表示できる最大のようです（もちろん、データによって異なります）。
これが Bootplyリンク です。
ここでは、ニーズに応じて選択できるいくつかの異なる種類のソリューション（例を含む）を示します。私のお気に入りは、テーブルをモバイル画面のリストに変えるバージョンです（素晴らしい！）：
元のテーブル：
CSSを介してリストに変換：
http://elvery.net/demo/responsive-tables/
bootstrap version およびjQueryプラグイン FooTables も参照してください。
モバイルを第一に考えましょう。このデータは、表になくても意味のある方法で提示できますか？テーブルが必要な場合があるので、それで行き詰まってしまうことがありますが、リストはそれほどでもないにしても同じくらい効率的です。これは通常、いくつかの主要なデータ列があり、残りの列がそれらの主要列に付随している場合に当てはまります。
そのような状況では、リストタイプのレイアウトを検討できます。同じデータが表示されますが、各行は「カード」として視覚的に表示されます。キーデータ列は視覚的に強調されており、他のキーデータは最小限です。メタデータまたはセカンダリデータが大量にある場合、小さな画面ではデフォルトで非表示になり、ミラー列（「> /続きを見る」タイプのアイコンで新しいページを表示）からアクセスできるようになります。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
列を並べて表示し、各フィールドの情報を切り捨てると、良い結果が得られると思います。ユーザーが多数の列を表示することを選択した場合、必要な切り捨ての量が増加します。
ユーザーは表示したいフィールドを決定できるので、短縮されたヘッダーと混同しないでください。
ユーザーが画面上で列をタッチした場合に列を拡張するためのいくつかの機能を実装することは、このタイプの設計にとって、すばらしい、おそらく不可欠な機能です。
モバイルバージョン：
最善の解決策は、リストビューに常に存在するいくつかの最も重要な列のみを表示し、リストアイテムをタップすると、そのリストアイテムに対応する詳細を表示するダイアログが表示されることです。
リストビューのように
21リストモードで短いテーブル要素をフローティングすることを検討してください
-----------------------------------------
20の「ボタン」サイズは32ピクセル以上にする必要があります
そして、あなたがいいえをタップした場合。 21、詳細全体を見ることができ、次へと前へボタンをそこに置いて詳細モードでナビゲートすることもできます。
私は このアプローチ がFilament Groupによって概説されているのが好きです。
本質的に、この記事では、列を見て、どの列が最も重要であるかを特定することを推奨しています。この重要性に基づいて列に優先順位を付けたら、ビューポートの各寸法に何が適合するかを確認し、縮小するときに列を削除します。
すべてのデータセットとデバイスに最適な結果が得られない場合でも、表示する列をユーザーが制御できるボタンを提供するボタンを提供することで、記事はさらに一歩進んでいます。
最後に、ユーザーが行をクリックすると、特定のレコードに関連するすべてのデータを詳細/カードビューで提供する際に、他の人が言及したことをお勧めします。
一般に、大きなテーブルは、画面スペースが限られているため、モバイルフレンドリーではありません。したがって、モバイルユーザーが必要とし、そこから作業する情報を把握する必要があります。彼らが絶対にすべてを必要とする場合、あなたがリンクした質問には、カードビューなどのいくつかの素晴らしい提案があります。
限られたスペースで、最低限を表示します。ユーザーが行を選択すると、カードビューに切り替わり、すべての詳細を表示するデッキをめくることができます。
コーディングの観点から可能であり、それがアプリケーションに適している場合は、以下のように提案します。
a）テーブルの形式は、基本的には今と同じです。すべての列を標準の幅にします。つまり、各列はtable-width /＃columnsを占めます。
b）各列には、列に収まるだけのデータが表示されます。
c）列のデータがオーバーフローすると、完全なフィールド値がツールチップにのみ表示されます。
ユーザーは、表示したい列を自由に定義でき、アプリケーションウィンドウが許可するのとほぼ同じ大きさのスペースにある任意のフィールドの値をツールチップの形式で表示します。