使用合并单元格嵌套的HTML表格

Question

我有一个HTML表看起来像这样：

它创建为一个单一的表是这样的：

<table border=1 frame=void cellspacing=0 cellpadding=4> 
<tr><th colspan=20 align=center><h2>Limits</h2></th></tr> 
<tr> 
<th colspan=6></th> 
<th colspan=6>Position Limits</th> 
<th colspan=4>Aim Order Limits</th> 
<th colspan=4>Actual Order Limits</th> 
</tr> 
<tr> 
<th colspan=6></th> 
<th colspan=2>Book</th> 
<th colspan=2>Product</th> 
<th colspan=2>Cluster</th> 
<th colspan=2>Buy</th> 
<th colspan=2>Sell</th> 
<th colspan=2>Buy</th> 
<th colspan=2>Sell</th> 
</tr> 
<tr> 
<th>Product</th> 
<th>Cluster</th> 
<th>Symbol</th> 
<th>Ticker</th> 
<th>Market</th> 
<th>MaxShort</th> 
<th>Min</th> 
<th>Max</th> 
<th>Min</th> 
<th>Max</th> 
<th>Min</th> 
<th>Max</th> 
<th>Min</th> 
<th>Max</th> 
<th>Min</th> 
<th>Max</th> 
<th>Min</th> 
<th>Max</th> 
<th>Min</th> 
<th>Max</th> 
</tr> 
<tr> 
<td>ALE-EU</td>  
<td>aleCHF</td> 
    , 
    , 
    . 
</tr> 
</table>  

我需要让这些嵌套这样我就可以在最内表（具有“Product，Cluster，...”标题行的表上有一个特定的类。我遇到的问题是外表不关心内部的列表，所以colspans是不正确的，我已经尝试过所有种类以不同的方式取得成功。这是我目前的标记：

<table border=1 frame=void cellspacing=0 cellpadding=4 style="width: 100%;"> 
<tr><th colspan=20 align=center><h2>Limits</h2></th></tr> 
<tr> 
<th align=center valign=bottom colspan=6></th> 
<th align=center valign=bottom colspan=6>Position Limits</th> 
<th align=center valign=bottom colspan=4>Aim Order Limits</th> 
<th align=center valign=bottom colspan=4>Actual Order Limits</th> 
</tr> 
<tr> 
<td> 
<table border=1 frame=void cellspacing=0 cellpadding=4> 
<tr> 
<th align=center valign=bottom colspan=6></th> 
<th align=center valign=bottom colspan=2>Book</th> 
<th align=center valign=bottom colspan=2>Product</th> 
<th align=center valign=bottom colspan=2>Cluster</th> 
<th align=center valign=bottom colspan=2>Buy</th> 
<th align=center valign=bottom colspan=2>Sell</th> 
<th align=center valign=bottom colspan=2>Buy</th> 
<th align=center valign=bottom colspan=2>Sell</th> 
</tr> 
<tr> 
<td> 
<table class="sortable" border=1 frame=void cellspacing=0 cellpadding=4 style="width: 100%;"> 
<tr> 
<th align=center valign=bottom>Product</th> 
<th align=center valign=bottom>Cluster</th> 
<th align=center valign=bottom>Symbol</th> 
<th align=center valign=bottom>Ticker</th> 
<th align=center valign=bottom>Market</th> 
<th align=center valign=bottom>MaxShort</th> 
<th align=center valign=bottom>Min</th> 
<th align=center valign=bottom>Max</th> 
<th align=center valign=bottom>Min</th> 
<th align=center valign=bottom>Max</th> 
<th align=center valign=bottom>Min</th> 
<th align=center valign=bottom>Max</th> 
<th align=center valign=bottom>Min</th> 
<th align=center valign=bottom>Max</th> 
<th align=center valign=bottom>Min</th> 
<th align=center valign=bottom>Max</th> 
<th align=center valign=bottom>Min</th> 
<th align=center valign=bottom>Max</th> 
<th align=center valign=bottom>Min</th> 
<th align=center valign=bottom>Max</th> 
</tr> 
<tr> 
<td>AMID</td>  
    . 
    . 
    . 

而我的表出来是这样的：

谁能告诉我怎么可以创建这个嵌套的表格，并保持相同的colspans当它是单桌吗？

Answer 1

我能够通过使用一个表，并把解决这一问题的所有然后修改js排序代码以使用thead的最后一行。

Answer 2

如果您尝试使用单个表格并连接下面代码中的标题，该怎么办？我认为这应该在语义上服务于你正在寻找的东西。我不知道，如果你能然后通过CSS样式增加跨度得到colspans，只是一念之所需的外观...

<table class="sortable"> 
    <tr> 
     <th align=center valign=bottom>Product</th> 
     <th align=center valign=bottom>Cluster</th> 
     <th align=center valign=bottom>Symbol</th> 
     <th align=center valign=bottom>Ticker</th> 
     <th align=center valign=bottom>Market</th> 
     <th align=center valign=bottom>MaxShort</th> 
     <th align=center valign=bottom> 
      <span>Position Limit</span> 
      <span>Book</span> 
      Min</th> 
     <th align=center valign=bottom> 
      <span>Position Limit</span> 
      <span>Book</span> 
      Max</th> 
     <th align=center valign=bottom> 
      <span>Position Limits</span> 
      <span>Product</span> 
      Min</th> 
     <th align=center valign=bottom> 
      <span>Position Limits</span> 
      <span>Product</span> 
      Max</th> 
     <th align=center valign=bottom> 
      <span>Position Limits</span> 
      <span>Cluster</span> 
      Min</th> 
     <th align=center valign=bottom> 
      <span>Position Limits</span> 
      <span>Cluster</span> 
      Max</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Buy</span> 
      Min</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Buy</span> 
      Max</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Sell</span> 
      Min</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Sell</span> 
      Max</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Buy</span> 
      Min</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Buy</span> 
      Max</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Sell</span> 
      Min</th> 
     <th align=center valign=bottom> 
      <span>Aim Order Limits</span> 
      <span>Sell</span> 
      Max</th> 
    </tr> 
    <tr> 
     <td>AMID</td> 
     <td>...</td> 
    </tr> 
</table>