Css 如何为具有自定义列宽的可滚动表格设置固定标题？

我尝试修复具有自定义列宽的可滚动表的标题

当我将tbody转为block标记时，标题列和正文列彼此不匹配

你可以从这支笔上看到这个例子

Html部分有一个div，在这个div中有一个表，我在col标签中定义了列大小

.tableDiv{ 高度：150像素； 溢出y：滚动； 填充：10px； } .固定头{ 宽度：100%； 表布局：固定； } 第1列 第2列 第3列 第4列 第5列 第1-0行 第1-1行 第1-2行 第1-3行 第1-4行 第2-0行 第2-1行 第2-2行 第2-3行 第2-4行 第3-0行 第3-1行 第3-2行 第3-3行 第3-4行 第4-0行 第4-1行 第4-2行 第4-3行 第4-4行 第5-0行 第5-1行 第5-2行 第5-3行 第5-4行 第6-0行 第6-1行 第6-2行 第6-3行 第6-4行 第7-0行 第7-1行 第7-2行 第7-3行 第7-4行

---

您可以将标题的位置设置为固定。我正在编写一个布局示例

<div style="display:flex;justify-content:space-between;">
 <div style="display:inline-block;"><!-- this will contain single column-->
<div style="position:fixed;top:0px;left:0px;">
Col1
</div>

---

在这里它解释并有工作版本。这个问题已经被回答了一个老问题。我的问题与自定义列宽不同，例如，前两列具有自定义宽度，我在col标记中定义了它们的宽度。我为您在stackoverflow post中发送的解决方案定义了列宽，但它不起作用。从@engtuncay可以看出，代码的问题在于布局。您应该首先将每一列分组为单个实体，然后您可以在flexbox中显示所有这些列，并将内容调整为间距，然后您可以修改标题和答案。您的意思是使用flex而不是table tag生成带有div标记的表吗？@engtuncay我的意思是，基本上您是在为第一行创建单独的元素，您希望它是固定的，但它就像按列布局表一样。