ネストされたツリーモデルデータをHTMLテーブルに表示する最良の方法
私は、主にデスクトップで使用されるwebappを作成していますが、モバイル（少なくともダッシュボード領域）での使用を意図していません-それで私には問題ありません...
「territoy subdivision」のようなデータモデルがあるとしましょう。英語で書く方法を許してください。
簡単にするために、ユーザーと国がいくつかありますが、国には州があり、州には都市があります。
1人のユーザーがNか国と関係を持つことができます（ただし、必ずしもすべてではない）。
1つの国がN州を持つことができます（ただし、必ずしもすべてではない）。
1つの州にN個の都市を含めることができます（ただし、必ずしもすべてではありません）。
したがって、ユーザー情報を表示すると、非常に大きな問題が発生しました。
例えば。：
Phillipには2つの国が割り当てられています。最初の国には、1つの都市を持つ1つの州しかありません。第二国には3つの州があり、各州には30の都市があります...
私の最初の試みは、この方法で情報を表示することでした：
国の問題：
Country1 | State1 | City1
Country2 | State2 | City2
Country2 | State2 | City3
Country2 | State2 | ...
Country2 | State2 | City32
Country2 | State3 | City33
Country2 | State3 | City34
Country2 | State3 | ...
Country2 | State3 | City63
Country2 | State4 | City64
Country2 | State4 | City65
Country2 | State4 | ...
Country2 | State4 | City94
しかし、これは恐ろしいことです。「冗長性」と「順序」の問題では、タイトルは「割り当てられた国で、2つのレコードを表示する代わりに、ほぼ100を表示しています...」.
私の2番目の試みは、ネストされたテーブルを作成することでした。以下のアイデアをASCCIfyしてみます。
これは簡単にするために、プレビューの例とは関係のない別の例であることに注意してください...
|-----------|----------|--------|
| | | |
| COUNTRY1 | STATE1 | CITY1 |
| | | |
|-----------|----------|--------|
| | | CITY2 |
| | STATE2 |--------|
| | | CITY3 |
| COUNTRY2 |----------|--------|
| | | CITY4 |
| | STATE3 |--------|
| | | CITY5 |
|-----------|----------|--------|
ここはとてもきれいに見えますが、かなりの数の都市を取得したときに問題が発生するため、どの州または国が属しているかで迷子になります。
私の最後の試み（実装されていません）はアコーデオンについて考えていましたが、本当にわかりません。このコミュニティの人々として、エキスパートデザイナーの推奨を聞きたいです。
ありがとう！
注：この質問にタグを付け直してください。
Expand（+）とCollapse（-）の記号を使用してレコードをツリーに表示し、開始ユーザーが国のみを表示できるようにしてから、レベルを下げ続けると、関連する州と都市を表示できるようにします。