复杂的面向列的表格布局

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似乎只有图像中的一组数据，这个数字非常接近。我已将该行的行跨放在其自己的行中，以便它不干涉项目。