サブグリッド-テーブル内のテーブル
ユーザーは、さまざまなテーブル内のレコードの関連データを表示する方法を求めていました。解決策は、それらを取得して、親テーブルの行の子テーブルにすることでした。例で説明するのがおそらく最も簡単でしょう。
各レコードのデータ量が非常に多いレストランのテーブルがあるとします（ここでは水平スクロールについて説明しています）。このグリッドには、+ボタンが付いたいくつかの（1〜15のいずれかの）列も含まれていますが、必要なグリッドを選択するためのポップアップ付きの1つのボタンにそれらを折りたたむことを計画しています。これらのボタンには、表示できるさまざまなサブグリッド（場所やメニュー項目など）を示すツールチップがあります。クリックすると、クリックしたセルの下の行が拡大し、クリックしたボタンに関連する情報を含む新しいグリッドが表示されます。同じ親行を含む複数のサブグリッドを同時に展開できます。
個人的には、デザインは気にしません。問題は、ユーザーが複数のレコードの同じ画面でこのすべての情報を表示できることを望んでいるため、さまざまなページやポップアップウィンドウへのリンクがオプションにならないことです。
このtable-in-a-tableレイアウトの代わりに使用できるものは何ですか？
Stackoverflowに関連するより具体的なソリューションですが、テーブルを処理する必要があるときはいつでも、dataTablesプラグインを使用します。
3Dデータの表示例をここで確認してください： https://datatables.net/examples/api/row_details.html
次に例を示します。
また、bootstrapおよびその他の多くの一般的なcssフレームワークで動作します。
しかし、あなたの場合、あなたは情報を表示するモーダルポップアップを持ちたいかもしれません。