Css 仅使用div元素显示表格数据

我有一个表，我需要添加一个全局标题，如下图所示。

我只处理div，而不是table标签。我已经尝试了很多的可能性来让它工作，但它不会。这是这张桌子的样子

以下是我尝试过的：

.clsDashMap\u sumSlideSiteContentSummary{
位置：绝对位置；
顶部：2rem；
宽度：100%；
身高：14rem；
颜色：#000000；
文本对齐：居中；
}
.clsDashMap_wrapTableSite{
显示：表格；
宽度：100%；
身高：14rem；
边框：2倍实心；
}
.tableSite_bloclogocategie{
显示：表头组；
背景颜色：灰色；
}
.sitelogo分类单元{
显示：表格行；
文本对齐：对齐；
填充：10px；
边框：2倍纯红；
}
.tableSite\u bloctitrecaterie{
显示：表头组；
背景颜色：灰色；
}
.siteTitleCategorie_单元{
显示：表格单元格；
文本对齐：对齐；
填充：10px；
边框：2倍纯红；
}
.tableSite\u blocFMTNT{
显示：表格行组；
背景颜色：灰色；
文本对齐：居中；
}
.blocFMTNT街{
显示：表格行；
边框：2倍实心；
}
.blocFMTNT rowTitle{
显示：表格单元格；
文本对齐：对齐；
填充：10px；
边框：2倍纯绿；
}
.blocFMTNT值{
显示：表格单元格；
文本对齐：对齐；
填充：10px；
边框：2倍纯黄色；
文本对齐：居中；
背景颜色：粉红色；
}
#pieChartAlm，#pieChartTkt{
保证金：自动；
宽度：5rem！重要；
高度：5雷姆！重要；
}

惊慌
批判
无支持
非名义
票
当然
水车
克洛斯
地点
珀特高频
-3DB
Décrochage酒店
警报接收
通用电气
TNT
1.2
1.3
1.4
1.5
1.6
1.7
1.8
1.9
1.10
1.11
调频
2.2
2.3
2.4
1.5
1.6
1.7
1.8
1.9
1.10
1.11

正如其他人在评论中提到的，这确实应该用table元素来处理，但是如果您绝对必须使用div，则可以这样做（通过权衡）

诀窍是在该标题的容器div中包含标题下的所有单元格或子标题，所有这些单元格或子标题元素都需要显示为内联块

要使它看起来正确，包含元素的最高级别必须将其宽度完全设置为其内容，除非您希望它扩展页面的整个宽度。如果您根本不担心响应性布局和/或单元格中溢出的行为，您可以找出它（当然，考虑到边框、边距和填充），并通过CSS设置它。。。否则，您必须使用JS以编程方式设置它，并在需要时进行更新

请看一看这个正在运行的程序的代码片段

更新：

我已经找到了一个更好的，甚至可能是理想的解决方案，让你的反应。它使用了总是很棒但经常被遗忘的：flex Box！ 浏览新的代码片段（或）并阅读我的评论，看看它是如何完成的。也是flex box表的良好资源

/*表
================================== */
.桌上容器{
宽度：75%；//设置相对于窗口宽度的表格宽度。
边距：0自动；//表格中心
}
.Rtable{
显示器：flex；
柔性包装：包装；
保证金：0.03亿元；
填充：0；
宽度：100%；
}
.标题行{
文本对齐：居中；
字号：1.4em；
}
.标题行h3{
保证金：0；
}
.表格行{
宽度：100%；
显示器：flex；
}
.Rtable单元格{//这将应用于所有表单元格。
框大小：边框框；//这将在调整大小时考虑边框。
填充：0.8em 1.2em；
//根据单元格内容，您可能需要更改
//溢出属性，但在某些情况下，它可能会中断
//flexbox。
溢出：隐藏；
轮廓：实心2倍灰色；
背景：浅灰色；
}
//这些类模拟colspan属性的效果
//要点：表中的列数将决定
//要使用的宽度百分比。
//例如，对于最小级别有8列的表，
//colspan-1需要设置为12.5%，colspan-2需要设置为25%，依此类推
在…上
.colspan-1{
宽度：25%；
}
.colspan-2{
宽度：50%；
}
.colspan-4{
宽度：100%；
}
/*页面样式-所有这些对于页面的布局都不是特别重要
桌子
================================== */
html{
身高：100%；
背景色：#EEE；
}
身体{
框大小：边框框；
最小高度：100%；
填料：2米；
字体系列：“Josefin Sans”，无衬线；
背景色：白色；
边框：双3px#DDD；
边框顶部：无；边框底部：无；
}

我是最高级别的
我是二级头球手
也是第二级！
我也是！
常规单元格第1行
常规单元格第1行
常规单元格第1行
常规单元格第1行
常规单元格第2行
常规单元格第2行
我只是一个普通的老牢房
常规单元格第2行

正如其他人在评论中提到的，这确实应该用一个表eleme来处理