带有 CSS 显示表的三列布局，第一行有多行？答案

【问题标题】：Three column layout with CSS display table, with first row having multiple rows?带有 CSS 显示表的三列布局，第一行有多行？
【发布时间】：2012-06-15 23:24:50
【问题描述】：

我正在开发一个新网站：

有 3 列 - 每列都是一个单元格
第一列有 3 行（徽标、导航、图标） - 有一个带有 display: 的 div 表，它用display:table-row 环绕 3 个 div。
其他两列只有 1 行。中间一栏是内容区。

但是，由于这是我第一次使用display:table，我遇到了一些我不太清楚的事情。我试图避免浮动 div。

如果我需要多行，每列每行有一个单元格，我是将每个单元格嵌入一行还是只创建每一行而不声明单元格。我了解浏览器会自动创建缺失的元素，但我想确保我正确执行此操作以避免由于浏览器自动创建缺失的元素而可能发生的任何副作用。

编辑：

我认为我的大脑工作过度了，我想我可以通过在第一列中使用 3 个 div 而不是使用带有行的嵌套表 div 来实现这一点。这只是突然出现在我的脑海中。

【问题讨论】：

对于第一列，如果我只添加 3 个普通 div 来模拟我需要的行，考虑到合规性、标准和兼容性，这是一个好方法吗？或者浏览器会将匿名表格单元格/表格行附加到普通 div 吗？
我喜欢只将表格用于表格数据，而不是用于实际布局:)。
@Damainman：向我们提供您的代码，以便我们尽快调查。
在jsfiddle.net 中加载您的代码片段，以便每个人都可以协作和编辑您的代码。

标签： css css-tables

【解决方案1】：

这样的事情怎么样？

<table>
    <tr>
        <td>
            Content One
        </td>
        <td>
            Content Two
        </td>
        <td>
            Content Three
        </td>
    </tr>
    <tr>
        <td colspan="3">
            MainVontent Four
        </td>
    </tr>
</table>

还是这样？

<table>
    <tr>
        <td>
            Content One
        </td>
        <td>
            Content Two
        </td>
        <td>
            Content Three
        </td>
    </tr>
    <tr>
        <td>
            <!-- INTENTIONALLY BLANK -->
        </td>
        <td>
            MainVontent Four
        </td>
        <td>
            <!-- INTENTIONALLY BLANK -->
        </td>
    </tr>
</table>

【讨论】：