html - 复杂的面向列的表布局

Question

我有一个 HTML+CSS 网格布局，如图 screenshot ，它本质上是一个面向列的表(相对于面向行的 HTML <table> ，它是逐行构建的)。

为了实现这种布局，我使用 <div> 构建了支持网格s，值组为右浮动 <table>秒。最初，我的值组为 <div> s 也是如此，但这需要固定的单元格宽度(尤其是单元格跨越多列)，所以现在我将表格用于值组。不管怎样，我都可以拥有可变数量的值组，这是我需要的。

我想做的是使用 <table>对于支持网格也是如此，所以我可以免费获得所有漂亮的跨行和跨列。然而，事实证明这是一项艰巨的任务，因为 table元素在流中被视为单个 block (元素不能围绕它流动)。

所以我的问题是:我可以在我的布局中使用表格作为“支持网格”，只使用 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

您不需要任何 div。它可以仅使用 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 设置样式，使其看起来像您想要的那样。