html - 如何将内表放在主表旁边

Question

如何将内部明细表定位在与外部表相同的级别，以使主表的高度最好不会被内部表的高度改变？

我们使用 Telerik 来显示一个更大的表格。我们的表包含一个明细表（红色），应显示在主表（绿色）旁边。

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>

Answer 1

整个事情可以用css float结合负边距来解决。

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