在HTML和CSS中使用Div的表格网格

我想使用DIV（仅限于HTML和CSS）创建一个表格网格。我差点陷入困境，但还是有一些问题。我附上了样本图像。我希望网格应该像这个示例图像一样。我附上了到目前为止我所创建的内容。你能帮助别人我在做什么，我如何改进以完成与图片相同的表格吗

HTML: 样本图像

---

将

显示：表格行

添加到行div，即

.rowDivHeader和.rowDiv

.containerDiv {
  border: 1px solid #3697f6;
  width: 100%; display:table
}    
.rowDivHeader {
      border: 1px solid #668db6;
      background-color: #336799;
      color: white;
      font-weight: bold; display:table-row
    }
    .rowDiv {
      border: 1px solid #668db6;
      background-color: #cee6fe;
      display:table-row
    }

&

显示：表格

至主分区

。containerDiv

.containerDiv {
  border: 1px solid #3697f6;
  width: 100%; display:table
}    
.rowDivHeader {
      border: 1px solid #668db6;
      background-color: #336799;
      color: white;
      font-weight: bold; display:table-row
    }
    .rowDiv {
      border: 1px solid #668db6;
      background-color: #cee6fe;
      display:table-row
    }

---

“我想使用DIV创建表格网格”-为什么？您应该使用表格。“我希望第一列和最后一列的宽度超过div的中间部分。”Wuut？嗨，这是我使用div创建表格网格的任务。@Amberlamps抱歉，错误地添加了行。很抱歉我编辑了这是表格数据，因此应该是使用表格的时候之一！嗨，sowmya，如果我在你的css中使用form方法，标题很好，但是第一列（推荐）中显示的所有列都是空的，剩下的列都是空的。我真的不明白你的意思。看看这个。这就是你想要的吗？嗨，对不起。您的代码运行良好，我也在我的项目中实现了。当我在ruby on rails的表单中得到这个表时，所有列都放在第一列，其他列都是空的。。为什么不把表格用在整张桌子上呢。这样地

.containerDiv {
  border: 1px solid #3697f6;
  width: 100%; display:table
}    
.rowDivHeader {
      border: 1px solid #668db6;
      background-color: #336799;
      color: white;
      font-weight: bold; display:table-row
    }
    .rowDiv {
      border: 1px solid #668db6;
      background-color: #cee6fe;
      display:table-row
    }