web-dev-qa-db-ja.com

複雑なテーブル構造を扱うときに、モバイル/レスポンシブ画面のユーザーエクスペリエンスを改善するにはどうすればよいですか?

レスポンシブ画面(モバイル)で複雑なテーブル構造を設計する方法は?

mockup

download bmml sourceBalsamiq Mockups で作成されたワイヤーフレーム

上記はテーブル構造です。テーブルの各セルは、「n」個のデータを持つことができます。ユーザーエクスペリエンスを妨げることなく、このレイアウトをモバイルでレスポンシブにするにはどうすればよいですか。

数値をクリックすると +5 同じセルで拡大します。

この種のビューの代替ソリューションはありますか?

3
NB4

モバイルでの一般的な代替手段は、1つの列にスタックし、各エリアにカードを使用することです。このようなもの:

enter image description here

5
Matt O'Keefe