How to position inner Table aside Main Table

Question

How can one position an inner detail table at the same level as the outer table, so that the height of the main table is preferably not changed by the height of the inner table?

We use Telerik to display a larger table. Our table contains one detail table (red), which should be displayed next to the main table (green).

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

The result is rendered in the browser as follows.

<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>

For further reference this is our ASPX code. Any CssClass used inside the RadGrid are only for background-color purposes currently.

<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>

Answer 1

The whole thing can be solved with css float in combination with negative margins.

.floatLeft { 
  width: 60%; 
  float: left; 
}

.floatRight {
  width: 40%; 
  float: right; 
  margin-top: -18px; /* Heigh of Header from main-table */
}

.container:after { 
  clear: both; 
}

<table class="container">
  <tr>
    <table id="main-table" border=1 class="floatLeft">
      <thead>
        <th>Header 1</th>
        <th>Header 2</th>
      </thead>
      <tbody>
        <tr>
          <td>Cell 1</td>
          <td>Cell 2</td>
        </tr>
      </tbody>
    </table>
  </tr>
  <tr>
    <td class="expand-col">&nbsp;</td>
    <td>
      <table id="detail-table" border=1 class="floatRight">
        <thead>
          <th>Header 1</th>
          <th>Header 2</th>
          <th>Header 3</th>
        </thead>
        <tbody>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
          </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
          </tr>
          <tr>
            <td>Cell 1</td>
            <td>Cell 2</td>
            <td>Cell 3</td>
          </tr>
        </tbody>
      </table>
    </td>
  </tr>
</table>