テーブルの行をグループ化する
現在、Webアプリケーションでテーブルを表示することは非常に一般的ですが、行のグループを含むテーブルを表示するのはそれほど簡単ではありません。
複数の行グループを持つことができるテーブルがあります。各グループには1〜5行を含めることができます。各行が旅行の途中にあると想像してください。一部の旅行には1つの目的地しかありませんが、他の旅行には複数の目的地があります。
ゼブラ色を使用して異なる行グループを分離することは chartJunk と考えることができると言われています。
アイテムを色でグループ化することのもう1つの問題は、質問が追加されることです。青い行は何か意味があるのですか？それらは何らかの形で関連していますか？彼らは隣人から離れているわけではありませんが、それは視聴者にいくつかの追加の処理を追加します。
視覚的な結果を比較するためにこの2つのプロトタイプを作成しましたが、背景色を使用したプロトタイプは、はるかにクリーンで視覚的に魅力的です。
ゼブラストリッピングなし
グループゼブラストリッピング
グループ化された行が互いに近づくように、それらの行の近接性を調整することができます。これにより、それほど厳しくない水平方向のルールを使用できるため、ユーザーはデータに集中できます。
前： - 
後： 
違いはかなり微妙ですが、重要な違いです。人工的な仕切りや色を使用するのではなく、「物理的な」距離を使用して関連アイテムをグループ化しています。
さらに誇張するために微調整することもできます。
コメントで書いたように、ゼブラパターンは良い選択ではないと思います。それは純粋に視覚的な理由で頻繁に使用され、アクセスできないため、習得するのは簡単ではないと思います（つまり、内容を詳しく調べることによってのみ、色付けの理由を導き出すことができます）。
さらに重要なことに、表示するサンプルテーブルには、シングルストップではなく、旅行に適用されるいくつかの列が含まれています（たとえば、旅行キー、ピックアップ、ドロップオフ）-列ではなく、行ごとではなくグループごとのエントリがあります。これが問題になるかどうかは、シングルストップのトリップ数と、スペースを必要とするデータがさらにあるかどうかによって異なります。
グループヘッダー行の使用について説明します。これにより、グループの視覚化が可能になります（各グループはヘッダー行で始まり、列スペースの使用方法が異なります（たとえば、グループヘッダーでのピックアップとドロップオフは、停止行が場所と時間を示す同じ列に表示されます）。
この解決策には2つの問題があり、1つは一般的な問題、もう1つはあなたのケースに固有の問題です。一般に、列ヘッダーをグループヘッダー行と一緒に配置することは困難です。あなたが持っているデータによっては、それを自立させる（誰もがアドレスを識別でき、列ヘッダー「場所」は必要ない場合がある）か、または「ピックアップではなく、個々の行にヘッダーをプッシュすることが可能です。 "および"ドロップオフ "列ヘッダーには、" 8ZIから8ZIへ "と入れることができます）。最後に、グループは時間の流れを表しているため、「ドロップオフ」などの情報をグループヘッダー行に移動すると、理解が難しくなる可能性があります。
グリッドで動的グループ化を使用できます。基本的に、これらの関連する行はすべて1つの行に折りたたまれます。視覚的には、インデントまたは線によって関係が明確になり、さらにグリッドがコンパクトになります。
私の意味を理解するために、これを SmartClientグリッドのデモ で行います。いいえ、私はその会社とは関係ありません。