レスポンシブデザイン-幅の広いHTMLテーブルの扱い方
私はレスポンシブデザインで概念実証を行っています。変更している1つのWebページに、非常に幅の広いテーブルがいくつかあります。テーブルの幅を縮小する方法がわからないので、モバイルブラウザーに水平スクロールバーがありません。
幅の広いテーブルで同じ問題が発生している人がいるかどうか、レスポンシブデザインを使用してモバイルブラウザーの水平スクロールバーを克服するために彼らが何をしたかを考えていました。ああ、私はテーブルの列を非表示にできないことを追加したいと思いました。
この状況には2つの方法があります。
オプション1：データをグループ化し、行1のデータを10列で表示する代わりに、実際に1列を使用してデータを段落に出力します。例：
ジョン・ドウ
名前：ジョン
姓：Doe
電話番号：1234567890
このデータは通常、大きな画面では5列に分割されます。
オプション2は、テーブルをそのままにし、水平方向にのみスワイプスクロールできるようにすることです。
可能な解決策の1つは、水平スクロールを採用することです。上記の私のコメントで、私はこれに対処することについて述べました。私たちが行ったこと（そしてそれは警官隊のアウトかもしれません）は、右側にわずかなフェードアウトを配置して、右側へのドラッグ可能性またはスクロール可能性のより大きな感覚を与えることでした。
それは最高の解決策ではありませんでしたが、それは解決策です。他の反応を知りたいのですが、これは妥当なフォールバックです。
大きなテーブルと小さな画面には何かが必要です。この課題があるとき、別の方法でデータをロードするために、多くの場合、テーブルをロードする必要はありません。ラベル内の各レコードのリスト：値の形式は頻繁に発生します。
ただし、テーブルが広く、各レコードに多数の属性がある場合、各レコードの詳細を表示したり、アコーディオンコントロールに似たものを作成したりする特別なページが必要になることがあります。
簡単に言えば、「テーブルを使用していなかった場合、どうすればこのデータを小さな画面に表示できますか」というように、データにアプローチしてみてください。 RWDには多くの課題がありますが、ページ上のすべての要素を同じマークアップに保つ必要があるとはどこにも述べられていません。
最後のビット-データを動的にロードすることを検討してください。このように、より適応的な方法で、表示している画面に合うデータのテンプレートを適用できます。
footable jQueryを使用することもできます。私はいくつかのプロジェクトで使用しましたが、問題なく動作します。ここにリンクがあります： http://css-tricks.com/footable-a-jquery-plugin-for-responsive-data-tables/
The Columns Project などの使用を検討することもできます。これにより、HTMLテーブルのモバイルフレンドリーなフォーマット/スタイリングが即座に可能になりますが、CSVファイルをアップロードする必要があります。
私は最近、雇用主のAPIドキュメントのスタイルガイドを作成するときにこの問題に遭遇しました。私の解決策は、各行を独自のミニテーブルに分割し、反時計回りに90度回転してデータを変換することでした。基本的に、私は各ソーステーブルをデータベースのように扱い、モバイルビューをテーブルの見出しでラベル付けされたデータのコンポーネントビューのように扱います。
これはすべての表形式のデータの特効薬ではありませんが、私が作成していたドキュメントページではうまく機能します。純粋なデータテーブル（たとえば、数値データの多くの列）には適切なソリューションではないことがわかります。
Codepenの実装 here を確認してください。このソリューションは、jQueryの上に構築されました。
TL;コードペンのDR：
- テーブルを適切にフォーマットします（table> thead> tr> td ^^ tbody> tr> td）
- 関数をコピーします。
- Jsで関数を実行し、レスポンシブにするテーブルを渡します。たとえば、次のようにすべてのテーブルを関数に渡すことができます。
tableMobilizer($("table"));
私が使用した戦略の1つは、メディアクエリを使用してテーブルコンテンツを表示および非表示にすることです。表示と非表示を切り替えることができるカスタムの「モバイル用に最適化された」列さえあります（はい、それはパフォーマンスにとって驚くべきことではありませんが、実行するのは簡単です！）
「モバイル向けに最適化された」列の使用例：
衣料品のリストがあるとしましょう：
テーブルは次のようになります
product name | color | size | shipping notes
awesome shirt | white | xl | us-only)
それらのいくつかを1列のセンテンスビューに圧縮して、うまく折り返すことができます。
「非表示」のモバイルのみの文は次のようになります：
**Awesome Shirt** - Shirt comes in white, xl. Only ships to US.
メディアクエリを使用して、この列を表示/非表示にできます
この方法を使用する利点：
- 実際には、DLを使用するよりも占有するスペースが少ない
- JavaScriptまたはサーバー側のモバイル検出は必要ありません
- とにかく、通常はモバイル向けにコンテンツを少し調整する必要があることがわかりました...
- 実装がかなり速い
欠点：
- さらにhtmlを送信する
- あなたは自分自身を繰り返しています。
これに取り組むにはいくつかの方法があります。
- 列セレクターと列の折り返し手法
この手法では、ユーザーは表示する列を決定するオプションがあります。また、画面の幅/解像度に基づいて列を子行に変換することもできます。
- オーバーフロー制御
この手法では、長いデータを持つ列を構成して、情報のサブセットを表示できます。ユーザーが自発的に省略記号をクリックすると、追加情報が表示されます。
- グリッドアプローチ
これは、ショッピングサイトに表示されるリストに似ていますが、1次元の垂直配列です。この場合、すべての情報はグリッド形式で表示されます。
最後に、 JQuery DataTable API は、最も信頼性が高く、柔軟で構成可能なテーブルの1つであり、上記のすべてのレイアウトとより多くのレイアウトを試すことができます。
お役に立てれば。