Question

我有一个HTML + CSS网格布局，就像这个screenshot一样，它本质上是一个面向列的表（相对于面向行的HTML <table>，它是逐行构建的）。

为了实现这种布局，我有从<div> s构造的支持网格，值组作为右浮动<table> s。最初，我的值组也是<div>，但这需要固定的单元格宽度（特别是单元格跨越多列），所以现在我使用表格作为值组。无论哪种方式，我都可以拥有可变数量的值组，这是我需要的。

我想要做的是使用<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

您不需要任何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对其进行样式设置，使其看起来像您想要的那样。

Answer 2

是的，您可以使用表格实现该布局，您需要使用rowspan和colspan的组合。

Heres a js fiddle Table Layout

我还提出了一种替代布局，不需要排列项目，这样可以更容易地更改每组的项目数。

更新

在看起来有用之前永远不要使用胡子。您的json似乎只有图片中的One set数据， templated 非常接近。我已经将项目的rowspan放在它自己的行中，这样它就不会干扰项目。

Answer 3

以下是我最终做的事情：http://fiddle.jshell.net/gGaXj/30/。在顶层，我有一个div的容器position: relative。容器内部是一个支持table，另一个带有position: absolute且带有right: 0; top: 0;（位于容器上方）的div包含我的右浮动值组表。有了这个解决方案，我可以轻松地使用带有rowspan / colspan的表格，以及easy＆amp; amp;迭代值组的速度只有一次，以将它们添加到布局中。此外，它与跨版/旧版浏览器兼容，其中div + CSS表格不会那么多。

复杂的面向列的表格布局

3 个答案: