テーブルのサブ行を表示する別の方法？
テーブルのサブ行を表示する方法を決定しようとしています。通常、行のインデントは、それが親のサブ行であることを意味します。
テーブルには親からの子の単一行を含めることができるため、展開などの他の視覚的側面が機能する場合があります。
子供たちのインデントを含まない、この関係を表す他の方法に興味があります。
例： 
これらのタイプのテーブルでは、通常、ユーザーが折りたたみを許可すると便利です。これは、親子関係を区別するのにも役立ちます。
私の経験から、ユーザーはアコーディオンメニューを好みます。 Googleの「アコーディオンメニューUI」だけで、すばらしい例がたくさんあります。
ただし、より詳細な調査を行うには、特にモバイルプロジェクトや、根拠のある設計の意思決定を求める要求の厳しいクライアント/利害関係者がいる場合は、次のことを知っている必要があります。
- 「テーブル」は、さまざまなデータポイントを並べ替えてグループ化するために親行をクリックした後、ユーザーが複数のサブ行を選択できるようにするデータテーブルですか？
- それとも、ユーザーが親行のサブ行のみを表示し、リンクをクリックしてページをたどることができるメニューの詳細ですか？ （これにより、ユーザーがリンクするさまざまなページ（固定、アコーディオン、ハンバーガーメニューなど）をナビゲートするときに、「テーブル」/メニューを表示する方法に関する他の完全な議論が生じます。）
メニューのようなテーブルのより多くの解決策を探していると思います。
Googleのマテリアルデザインはネストを支持しています。
または、テーブルでユーザーがサブ行を操作できる場合は特に、拡張パネルが必要な場合があります。
下のコンテンツのサイズを変更せずに、行内のオブジェクトのサイズを減らして階層順序を示すことができます。
テキストベースである必要がある場合は、 treeコマンド の同じアプローチを使用できます（これらの特殊文字をコピーして貼り付けます）：
.
├── animals
│ ├── fishes
│ │ ├── nemo
│ │ └── swordfish
│ └── mammals
│ ├── dog
│ ├── elephant
│ └── lion
└── plants
├── bushes
│ └── maple
└── trees
├── cedrela
└── mahogany
他のユーザーが言ったことに加えて、影付きの背景色、インデント、アコーディオンなど、3Dベベルも役立つと思います。設定の隅に影を追加することにより、親行よりも深いようにサブ行を表示できます。
また、親行にはアコーディオン機能とその表示、異なる背景色、またはドロップダウンシンボルが必要です。
画像では、サブテーブルの左上隅にベベルシャドウが追加されています。ただし、より小さな影を反対側のコーナーに追加して、より3Dに見えるようにする必要があります。 CSSを使用してそれを行うのは少し難しいので、私はしませんでした。
上記のテーブルを生成する非常に基本的な fiddle を次に示します。
ゼブラストライプを使用したデータテーブルの場合、以前の回答で示したものとは異なるアプローチが必要です。この場合、あなたはあなたの利点で奇数/偶数行の色を使うことができます：
このグリッドの例 のように、展開可能な行を使用して、階層をテーブルに表示できます。