两个表在彼此下方，对齐列答案

【问题标题】：Two tables under each other, align the columns两个表在彼此下方，对齐列
【发布时间】：2018-02-21 16:07:32
【问题描述】：

我在下面有两张桌子。一张表代表表头，另一张表数据。

请看图片 -> 就像在普通桌子上一样。数据列应与头列对齐

以便 Text1 的 data 适合 header Text1 例如

也请看这个Fiddle

我尝试将特定宽度设置为td 和th，但似乎不起作用。

有人可以帮忙吗？

【问题讨论】：

【解决方案1】：

删除

</table>

<table class='table table-hover table-bordered table-striped responsive-table' id='TableBody'>

来自用户代码.. 一切都会好起来的

【讨论】：

为什么？必须分成两张表。
这种分离是表格设计失真的主要原因
这背后的背景是：我想在垂直滚动时修复header-content。在水平滚动时，heads 应该正常滚动。这就是我想要两个表的原因，所以当用户水平滚动内容表（使用 JS）时，我可以水平滚动头表。在垂直滚动时，头部自然是固定的（因为两个单独的表）。如果您可以在所有内容都在一个表中时向我提供这种行为，那么将不胜感激。否则我需要两个表，列对齐
使用以下代码解决了一个表的滚动问题：document.getElementById("TableHead").addEventListener("scroll", function(){ var translate = "translate(0,"+this. scrollTop+"px)"; this.querySelector("thead").style.transform = translate; });
那么现在看起来怎么样..你能不能展示一下..另一个小提琴