使用flex和div构建具有固定列的表

Question

我正在构建应该是完全响应的表(所以我在div上使用flex而不是table)。我希望能够固定列。

这就是我得到的https://codepen.io/piernik/pen/LmoBxM

有什么问题吗？当您向左滚动时，固定的列将消失。这可能是因为.row2具有视区宽度，而不是整个表格。你可以在红色的顶部边框上看到.row2的宽度。

我能修好它吗？

我想建立响应表与固定的列，可以有hsrcoll没有任何JS。

Answer 1

你在单元格中使用了flex-basis:500px，这就是为什么你的表格宽度大于窗口宽度，而flex只覆盖所有窗口宽度。