html - インナーテーブルとメインテーブルの置き方

Question

内側の詳細テーブルを外側のテーブルと同じ高さに配置して、内側のテーブルの高さによってメイン テーブルの高さが変わらないようにするにはどうすればよいでしょうか。

Telerik を使用して、より大きなテーブルを表示します。このテーブルには、メイン テーブル (緑) の隣に表示される 1 つの詳細テーブル (赤) が含まれています。

https://demos.telerik.com/aspnet-ajax/grid/examples/hierarchy/hierarchy-with-templates/defaultcs.aspx

結果は次のようにブラウザにレンダリングされます。

<tbody>
  <tr class="main-table">...<tr> //Main Table: Height of 40px & Width of 2000px
  <tr>
    <td class="expand-col">&nbsp;</td>
    <td>
      <table class="detail-table">...</table> //Detail Table: Heigh of 500px & Width of 700px
    </td>
  </tr>
</tbody>

詳しくは、こちらの ASPX コードを参照してください。RadGrid 内で使用される CssClass は、現在、背景色のみを目的としています。

<telerik:RadGrid runat="server" RenderMode="Lightweight" Width="2440px"
    AutoGenerateColumns="False" Style="outline: none;"
    AllowMultiRowSelection="true" AllowMultiRowEdit="true">
    <ClientSettings EnableAlternatingItems="false">
        <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="" />
        <ClientEvents OnBatchEditCellValueChanged="enableSave" />
        <ClientEvents OnRowSelected="enableButtons" />
        <ClientEvents OnBatchEditOpening="onBatchOpening" />
        <ClientEvents OnBatchEditClosed="onBatchClosed" />
        <ClientEvents OnBatchEditClosing="onBatchClosing" />
        <Selecting AllowRowSelect="true" UseClientSelectColumnOnly="true" />
    </ClientSettings>
    <MasterTableView CssClass="thema-table" TableLayout="Fixed" Name="Thema" DataKeyNames="ThemaName" HeaderStyle-HorizontalAlign="Center"
        HierarchyDefaultExpanded="true" BatchEditingSettings-SaveAllHierarchyLevels="true" EditMode="Batch">
        <DetailTables>
            <telerik:GridTableView CssClass="aktionsgruppe-table" HeaderStyle-HorizontalAlign="Center" Name="AG" HierarchyDefaultExpanded="true" EditMode="Batch">
                <DetailTables>
                    <telerik:GridTableView HierarchyDefaultExpanded="true" CssClass="artikel-table"  HeaderStyle-HorizontalAlign="Center" Name="Artikel" EditMode="Batch">                          
                        <Columns>...</Columns>
                        <DetailTables>
                            <telerik:GridTableView  Name="Clusters" EditMode="Batch" CssClass="cluster-table" Width="685px">
                                <Columns>...</Columns>
                            </telerik:GridTableView>
                        </DetailTables>
                    </telerik:GridTableView>
                </DetailTables>
                <Columns>...</Columns>
            </telerik:GridTableView>
            <telerik:GridTableView Width="350px" CssClass="aktionsgruppe-table" TableLayout="Auto" DataKeyNames="Zusammenfassung" HeaderStyle-HorizontalAlign="Center" Name="Zusammenfassung" HierarchyDefaultExpanded="true">
                <Columns>...</Columns>
            </telerik:GridTableView>
        </DetailTables>
        <Columns>...</Columns>
    </MasterTableView>
</telerik:RadGrid>