jquery - モバイルデバイスで幅の広いテーブルを処理する方法

Question

ここで少し一般的な質問です。モバイルデバイスで幅の広いテーブル (つまり、たくさんの列) を表示する賢い方法があるかどうか疑問に思っています。

少し説明すると、メインサイトから ajax を使用してコンテンツをロードするモバイルサイトを作成します。これらのページには、多くの列を持つテーブルが含まれている場合があります。表全体を縦向きのモバイルデバイスに合わせる唯一の方法は、読めなくなるまでフォントサイズを小さくすることです。

そこに別のオプションがあるかどうか疑問に思いました。

ありがとう。

score 5 · Accepted Answer

テーブルを使用してデータを表示する代わりに、各行に「ウィジェット」を使用できます。これにより、モバイル向けの設計がはるかに簡単になり、応答性の高い方法でデータフローを作成できます。

score 4 · Accepted Answer

私は以前にこの問題に直面しました...そして、データ全体を表示するための十分なスペースがないため、それは苦痛です。

その時私がそれを解決した方法は、折りたたみ可能なアイテムのリストを使用することでした。各行の最も重要なデータのみを含むリストを作成します。ユーザーがその行について詳しく知りたい場合は、行をクリックして折りたたむと、すべての詳細が表示されます。

ちょうど私の2セント...

score 2 · Accepted Answer

あなたがそれを危険にさらしても構わないと思っているなら、jQuery Mobileのベータ版（この質問がそれに関連している場合）には、新しいレスポンシブテーブル実装があります：

基本的に画面幅が狭い場合は、幅の変化に合わせてサイズを変更します。幅が小さすぎる場合、いくつかの事前定義された列が非表示になるように使用できます。現在、これは jQuery Mobile フレームワークのレスポンシブテーブルに最適なソリューションです。

score 2 · Accepted Answer

しばらく前にこの種のテクニックを発見し、将来の使用のためにブックマークしましたが、そのようなことをする必要性が見つからなかったので、私は試していませんが、それは素晴らしいアイデアです:

jquery - モバイル デバイスで幅の広いテーブルを処理する方法