複雜的面向列的表格佈局

Question

我有一個HTML + CSS網格佈局，就像這個screenshot一樣，它本質上是一個面向列的表格（而不是面向行的HTML <table>，它是逐行構建的）。

爲了實現這種佈局，我有從<div> s構建的支撐網格，並將值組作爲右浮動<table> s。最初，我也將值組設置爲<div> s，但這需要固定的單元格寬度（尤其是單元格跨越多列），所以現在我正在使用表格作爲值組。無論哪種方式，我可以有一個可變數量的值組，我需要。

我想要做的是使用<table>作爲支持網格，所以我可以免費獲得所有漂亮的跨行和列跨越。但是，這已被證明是一項艱鉅的任務，因爲table元素被視爲流中的單個塊（元素不能在其周圍流動）。

所以我的問題是這樣的：我可能在我的佈局中僅使用HTML + CSS使用表格作爲「支持網格」嗎？此外，請隨時爲這種佈局的建設提供不同的方法。

編輯：

我應該提到，這個佈局是動態生成，接下去就是單表解決方案將無法工作。這是因爲在這種情況下，項目是靜態的，但值組不是。我需要能夠輕鬆地添加/刪除值組，以便可以使用模板引擎（如{{mustache}}）生成此值。使用單表解決方案時，爲了添加一個值組，每個<tr>必須添加一組額外的<td>，這在使用任何模板引擎時肯定不是微不足道的，特別是{{mustache}}，是我正在使用的。

例如，我的源數據（JSON）可能看起來像：

{ 
    "oneTwoTotal": "$0.00", 
    "valueGroups":[ 
     { 
     "groupName":"ValueGroup1", 
     "values":[ 
      { 
       "subgroupName":"Column 1", 
       "item1":"$0.00", 
       "item2":"$0.00", 
       "item3":"$0.00", 
       "total":"$0.00" 
      }, 
      { 
       "subgroupName":"Column 2", 
       "item1":"$0.00", 
       "item2":"$0.00", 
       "item3":"$0.00", 
       "total":"$0.00" 
      } 
     ] 
     }, 
     { 
     "groupName":"ValueGroup2", 
     "values":[ 
      { 
       "subgroupName":"Column 1", 
       "item1":"$0.00", 
       "item2":"$0.00", 
       "item3":"$0.00", 
       "total":"$0.00" 
      }, 
      { 
       "subgroupName":"Column 2", 
       "item1":"$0.00", 
       "item2":"$0.00", 
       "item3":"$0.00", 
       "total":"$0.00" 
      } 
     ] 
     } 
    ] 
} 

想象一下，一個模板引擎構建的單表解決方案，使用該數據。

Answer 1

以下是我最終做的：http://fiddle.jshell.net/gGaXj/30/。在頂層，我有一個容器div與position: relative。在容器內部是背景table，另一個div與position: absolute與right: 0; top: 0;（位於容器上）包含我的右浮動值組表。有了這個解決方案，我可以輕鬆使用帶有rowspan/colspan的表格，並且只需重複一次迭代value-groups的速度即可將其添加到佈局。此外，它是跨/舊瀏覽器兼容，其中div + CSS表格不會那麼多。

Answer 2

您不需要任何div s。它可以僅使用table元件來實現：

Demo

<table> 
    <thead> 
     <tr> 
      <th colspan="2" rowspan="2">Really Complex Layout</th> 
      <th colspan="2">Value Group 1</th> 
      <th colspan="2">Value Group 2</th> 
     </tr> 
     <tr> 
      <th>Column 1</th> 
      <th>Column 2</th> 
      <th>Column 1</th>   
      <th>Column 2</th> 
     </tr> 


    </thead> 
    <tbody> 
     <tr> 
      <td rowspan="4">One</td> 
      <td>Item 1</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
     </tr> 
     <tr> 
      <td>Item 2</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
     </tr> 
     <tr> 
      <td>Item 3</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
     </tr> 
     <tr> 
      <td>One Total</td> 
      <td colspan="2">$0.00</td> 
      <td colspan="2">$0.00</td> 
     </tr> 
     <tr> 
      <td rowspan="4">Two</td> 
      <td>Item 1</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
     </tr> 
     <tr> 
      <td>Item 2</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
     </tr> 
     <tr> 
      <td>Item 3</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
      <td>$0.00</td> 
     </tr> 
     <tr> 
      <td>Two Total</td> 
      <td colspan="2">$0.00</td> 
      <td colspan="2">$0.00</td> 
     </tr> 
     <tr> 
      <td colspan="2">One & Two Total</td> 
      <td colspan="2">$0.00</td> 
      <td colspan="2">$0.00</td> 
     </tr> 
    </tbody> 
</table> 

你當然也可以風格它的CSS做不過你想要它看起來。

Answer 3

是的，您可以使用表格來實現該佈局，您需要使用rowspan和colspan的組合。

繼承人爵士小提琴Table Layout

我還提出了一個替代的佈局，這並不需要行跨越這將使其更容易改變每個組的項目數量的項目。

更新

從未使用小鬍子，看起來有用。你的json似乎只有圖像中的一組數據，這個數字非常接近。我已將該行的行跨放在其自己的行中，以便它不干涉項目。