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

Question

我有一个包含两个固定列的表格，一个在左边，一个在右边。

目前它只适用于一种分辨率。但是当分辨率改变时，右边的栏会变得很乱。

这是控制边距(为固定列留出空间)以及宽度的主要类:

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

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

我怎么可能编辑我的 css 类来让它响应？

Here is a demo

Answer 1

尝试使用 min-width 和 max-width 来限制 wrapper 的宽度:

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

FIDDLE DEMO