如何使用基于div的表跨列？

Question

我想让一个单元格穿过两列,下面有两个单元格.我如何在CSS中使用<div>元素执行此操作？它应该相当于:

<table>
  <tr>
    <td colspan="2">Major column</td>
  </tr>
  <tr>
    <td>C1</td>
    <td>C2</td>
  </tr>
</table>

请注意,C1和C2不一定是50%.值可能会根据其内容而改变.我还需要那些单元格中的所有项目,无论有多少行排列,就像在表格中一样.

Answer 1

“请注意，C1 和 C2 不一定各为 50%。该值可能会根据其内容而变化。我还需要这些单元格中的所有项目，无论有多少行，就像在桌子。”

如果不使用表格，上述内容不可能以跨浏览器的方式实现（您可以使用 CSS 模拟表格布局：“display: table”，但这在 IE6 或 IE7 中不起作用）。

我建议您在使用 CSS 而不是表格进行设计时以不同的方式思考，不可能仅用“div”替换“tr”和“td”并让事情像以前一样神奇地工作。我建议您设置底部“单元格”的宽度，并使用上面提供的选项之一。

希望有帮助！