Javascript 表中具有div'的不对称行和列；s

我使用div来制作表格（div是因为我有一些复杂的设计）。 我希望我的第一行有多个列，第二行只是一行，跨越整行，下一行又是多列行

这第一行，第二行不是静态的，它是由数据动态决定的

我的css：

#table-holder {
    margin: 0 auto;
    display: table;
    border: solid 2px #b7ddf2;
    background: #ebf4fb;
    font-family: Verdana, Geneva, sans-serif;
}

#row {
    display: table-row;
    border: solid 2px #b7ddf2;
    padding: 2px 2px 2px 2px;
}

#column {
    display: table-cell;
    border: solid 2px #b7ddf2;
    padding: 2px 2px 2px 2px;
}

我的html：

<div id="table-holder">
  <div id="row">
    <div id="column">
    </div>
    <div id="column">
    </div>
    <div id="column">
    </div>
  </div>
  <div id="random">
      I want this to span for my whole row, instead of just 1st column.
  </div>
  <div id="row">
    <div id="column">
    </div>
    <div id="column">
    </div>
    <div id="column">
    </div>
  </div>

我想让它覆盖我的整行，而不仅仅是第一列。

有什么想法吗

---

谢谢你

你可能会遇到麻烦，因为这不是DIV的真正用途。它们是块级元素。如果要创建表，应该使用table、tr-td等

获取中间行以跨越容器的宽度，但我认为这可能会剥夺您所需的功能

---

如果设置为使用divs，我建议您研究float和列的clearfix方法。

您不应该复制id属性。根据定义，这些应该是屏幕上单个对象所独有的。CSS不会抱怨，但任何js都会抱怨。对于不是严格意义上的单例，请使用类。我从来不知道。非常感谢。将id属性更改为class会解决此问题吗？可能会重复