使用 display: table, table-row, table-cell 模拟 colspan (即 >=8)答案

【问题标题】：Simulating colspan (on ie >=8) by using display: table, table-row, table-cell使用 display: table, table-row, table-cell 模拟 colspan (即 >=8)
【发布时间】：2013-11-04 21:08:10
【问题描述】：

我必须创建一个包含两行的布局。第一行有一个单元格，第二行有三个单元格：

|     A     |
| B | C | D |

是否可以通过 div 使用 css 显示属性 table、table-row 和 table-cell？

我通过使用两个不同的表格 div（一个用于第一行，一个用于第二行）成功地创建了该布局，但是单元格之间的边框间距产生了不好的效果：两行之间的间距是在第二行的单元格之间加倍。

【问题讨论】：

标签： css internet-explorer tablelayout

【解决方案1】：

不，CSS 表格模型目前比 HTML 表格模型简单得多。 CSS 表格是一个简单的网格，没有 colspan 或 rowspan 的对应物。

有很多方法可以实现所需的布局，例如使用 CSS 定位。

【讨论】：

是的，但我想提醒人们，一般的表格布局不能通过 CSS 定位来复制（好吧，在 flex 或 grid 之前），因为 table 的，唯一地，自动调整它们的行和列的大小并将推断的大小也应用于相关元素。简而言之：如果您想根据内容调整复杂布局的大小，只需使用表格即可。
@EamonNerbonne，对，但由于问题似乎是关于页面布局设计（而不是广义上的表格数据），我希望这个想法是设置“单元格”宽度明确地，在某些单位中，而不是自动表格布局。
@JukkaK.Korpela：所以您建议明确设置单元格宽度，例如以 px 为单位，不是吗？还是用html表格更好（你说得对，我需要一个页面布局）
@Cricket，如果没有看到具体问题，我不会提出任何建议，这将是一个完全不同的问题。并且有无数种方法可以进行简单的页面布局。
@JukkaK.Korpela：我有 4 个文本框，每个文本框都有一个标题、一个文本正文和一个链接。第一个框在顶部，宽度为 100%，而其他三个框在第二行。