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

我想让一个单元格穿过两列，下面有两个单元格。如何在CSS中使用

元素来实现这一点？它应相当于：

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

主栏
C1
C2

---

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

您需要如下标记：

<div class="main">
    <div class="topRow">Major column</div>
    <div class="leftCol">C1</div>
    <div class="rightCol">C2</div>
<div>

---

如果用于布局，我建议将它们放在容器div中

HTML:

---

如果不清楚，就不需要为这种情况创建两个单独的CSS类。最后两个div都有50%的宽度，没有边距，也没有填充。将它们都设置为50%宽度和左浮动与将右浮动设置为右浮动具有相同的效果。

以上所有操作都会起作用，但请记住，元素将从IE6中的父div“转义”。这是一种痛苦，但IE6支持仍然是大多数人需要考虑的问题

转义的解决方案是为包含的元素指定一个高度或宽度（任何值都可以，它都会拉伸以适合，所以我通常使用1%）

另外，如果设置宽度，请记住，您设置的任何边框或边距都是元素宽度之外的，因此，如果您将两个div设置为50%并带有边框或边距，则将得到换行符

“请注意，C1和C2不是 每个都必须是50% 值可能会根据其大小而变化 目录。我还需要所有的项目 这些细胞不管有多少行 有人会像他们一样排队 我会坐在桌子上。”

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

我建议你在使用CSS而不是表格进行设计时，要想有一点不同的想法，用“div”代替“tr”和“td”并让事情像以前一样神奇地工作是不可能的。我建议您设置底部“单元格”的宽度，并使用上面人们给您的选项之一

---

希望有帮助

包含

div

s的一般结构可能会使问题更容易理解。从编辑过程中，听起来您试图使用div是为了使用div。如果您的数据是表格数据，请使用表格？如果您显示的是表格数据，那么这就是构建表格的目的——使用它们并不羞耻。如果您正在进行布局，那么最好完全删除表隐喻，并使用嵌入的div进行设计。+1但您不必在顶行上指定宽度和清除

div.topRow {
  width:100%;
  clear:both;
}
div.leftCol {
  width:50%;
  float:left;
}
div.rightCol {
  width:50%;
  float:right;
}

<div> full width </div>
<div class="column50"> left </div>
<div class="column50"> right </div>

div.column50 {
    float: left;
    width: 50%;
}