使用合併單元格嵌套的HTML表格

enter image description here

它創建爲一個單一的表是這樣的：

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

而我的表出來是這樣的：

enter image description here

誰能告訴我怎麼可以創建這個嵌套的表格，並保持相同的colspans當它是單桌嗎？

來源

2014-05-06 Larry Martell

它是否必須是嵌套表？你能不能根據需要在單個單元上使用類？ – Eeji

我們使用的排序軟件包要求將類放在要排序的表上，並使標題行可點擊進行排序。 –

我不認爲使用嵌套表來獲得所需的外觀是可能的。我會研究你正在使用的排序軟件包 - 你不能自定義它用作標題的內容嗎？ –

我能夠通過使用一個表，並把解決這一問題的所有然後修改js排序代碼以使用thead的最後一行。

來源

2014-05-07 23:34:21

如果您嘗試使用單個表格並連接下面代碼中的標題，該怎麼辦？我認爲這應該在語義上服務於你正在尋找的東西。我不知道，如果你能然後通過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>

來源

2014-05-07 16:27:12 lbekic

不幸的是，用戶不喜歡那種格式。不管怎麼說，還是要謝謝你。 –

使用合併單元格嵌套的HTML表格

回答

相關問題