使用colspan与嵌套的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

如果您尝试使用单个表并连接下面的代码中的标题，该怎么办？我认为这应该服务于你正在寻找的语义。我不知道你是否可以通过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>

Answer 2

我能够通过使用一个表并将所有标题行放入a然后修改js排序代码以使用thead的最后几行来解决这个问题。