如何使具有两个固定列的表响应？

Question

我有一张桌子，上面有两列固定的列，一列在左边，一列在右边。

目前，它仅以一种分辨率起作用。 但是，当更改分辨率时，右侧的列会变得非常混乱。

这是控制边距（为固定列留出空间）以及宽度的主要类：

#myTable > .wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    width: 83%;
    margin-left: 126px;
    margin-right: 45px;
}

我尝试进入开发人员工具并在调整浏览器大小时将width值减小了。 到目前为止，这是我找到的唯一解决方案。 虽然，这将需要大量的媒体查询，这不是一个可取的解决方案。

我怎么可能编辑我的css类以使其响应？

这是一个演示

Answer 1

尝试使用min-width和max-width限制包装器max-width ：

#myTable > .wrapper {
    overflow-x: scroll;
    overflow-y: visible;
    max-width: 83%;
    min-width: 40%;
    margin-left: 126px;
    margin-right: 45px;
}

现场演示