在HTML中使用div生成表

我想通过在html和CSS中使用DIV来创建这样的表 但是我有一张这样的桌子 我试过了，但没有达到预期的效果。我需要在哪里更改代码？有人能帮我吗

.tableMain{
显示：表格；
宽度：100%；
背景色：黑色；
}
tableRow先生{
显示：表格行；
颜色：浅绿色；
}
.tableCell，
.桌子头{
边框：1px纯水；
显示：表格单元格；
左侧填充：5px；
}
.表格标题{
显示：表头组；
字体大小：粗体；
}
.桌体{
显示：表格行组；
}

标题-1
标题-2
第1节
标题
描述

项目-1
项目-2
项目-3

第2节
标题-1
标题-2
标题-3
A

B

C

A

B

C

A

B

C

…这是使用css伪造表格的唯一缺点-不能伪造

colspan

和

rowspans

因此，手动设置精确表格的样式是可能的，但对于动态内容来说，这并不容易

事实上，这就是为什么存在如此多的html元素——每一个都有它的目的。在我看来，

表

最适合这种情况

---

如果您使用div来使表响应，您可以用另一种方法来实现-即在需要时将表格行、表格单元格等样式设置为div元素。

…这是使用css伪造表格时的唯一缺点-您不能伪造

colspan

和

行span

因此，手动设置精确表格的样式是可能的，但对于动态内容来说，这并不容易

事实上，这就是为什么存在如此多的html元素——每一个都有它的目的。在我看来，

表

最适合这种情况

如果您使用div使表具有响应性，您可以使用另一种方法，即在需要时设置表格行、表格单元格等的样式，使其看起来像div元素。

您可以尝试此方法

html

这里是供参考的链接

您可以试试这个

html

---

以下是供参考的链接

您的HTML结构有一些错误。。 你看。。最后一个单元格中有一个完整的表，因此HTML结构应该在最后一个单元格中有一个完整的表，如下所示：

.tableMain{
显示：表格；
宽度：100%；
背景色：黑色；
}
tableRow先生{
显示：表格行；
颜色：浅绿色；
}
.tableCell，
.桌子头{
边框：1px纯水；
显示：表格单元格；
左侧填充：5px；
}
.表格标题{
显示：表头组；
字体大小：粗体；
}
.桌体{
显示：表格行组；
}
.身体{
边际：0px；
}

标题-1
标题-2
第1节
标题
描述

项目-1
项目-2
项目-3

第2节
标题-1
标题-2
标题-3
A

B

C

A

B

C

A

B

C

您的HTML结构有一些错误。。 你看。。最后一个单元格中有一个完整的表，因此HTML结构应该在最后一个单元格中有一个完整的表，如下所示：

.tableMain{
显示：表格；
宽度：100%；
背景色：黑色；
}
tableRow先生{
显示：表格行；
颜色：浅绿色；
}
.tableCell，
.桌子头{
边框：1px纯水；
显示：表格单元格；
左侧填充：5px；
}
.表格标题{
显示：表头组；
字体大小：粗体；
}
.桌体{
显示：表格行组；
}
.身体{
边际：0px；
}

标题-1
标题-2
第1节
标题
描述

项目-1
项目-2
项目-3

第2节
标题-1
标题-2
标题-3
A

B

C

A

B

C

A

B

<div class="table">
<div class="table-row">
<div class="table-cell">Header1</div>
  <div class="table-cell">Header2</div>
</div>
  <div class="table-row">
  <div class="table-cell">section1</div>
    <div class="table-cell">
      <div>title</div>
      <div>description</div>
      <ul>
      <li>item1</li>
      <li>item2</li>
      <li>item 3</li></ul>
    </div>
  </div>
  <div class="table-row">
  <div class="table-cell">Section2</div>
  <div class="table-cell">

    <div class="table">
    <div class="table-row">
    <div class="table-cell">

      Header 1
      <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    <div class="table-cell">
    Header 2
       <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    <div class="table-cell">
      header 3
       <div>
        A
      </div>
      <div>
      B
      </div>
      <div>
      C
      </div>
    </div>
    </div>
    </div>

  </div>
  </div>
</div>

.table
{
  display:table;
  border:1px solid;
  width:100%;
  text-transform:capitalize;
}
.table-row
{
  display:table-row;
  border:1px solid;
}
.table-cell
{
  display:table-cell;
  vertical-align:middle;
  border:1px solid;
}