使用固定的 minWidth 调整 React Bootstrap Table 列大小

Question

我有一个 Bootstrap table，其中的列是切换的。由于列的数量，我需要使用水平流使其全部适合内部。但是，header 的大小和列本身变得太小以至于无法读取。所以我必须为每列设置一个最小宽度。

因此，列应始终处于整个 table 长度，并调整大小以填充所有内容。但是，当我使用固定的 minWidth 并且列数不多时，列不会调整大小以适应整个 table。在下图中，红色方块不应该出现，而是填充了列。

我创建了一个沙箱 link，其中 table 无法正确调整大小。

https://codesandbox.io/s/eloquent-almeida-9lgp2?file=/src/index.js

我已经搜索过堆栈溢出来帮助我解决水平溢出问题，顺便说一句，这是我曾经这样做过的CSS。我认为这就是列未按应有的方式调整大小的原因。

#table-employee-compensation {
  overflow: auto;
  display: block;
  width: auto !important;
  table-layout: auto !important;
}

感谢您花时间阅读本文！

Answer 1

我通过将 overflow: auto 添加到 .react-bootstrap-table、删除 width: auto !important; 并从 #table-employee-compensation [=16] 更改 display: block; 来解决=].按预期工作。