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

Question

我有一个引导表，其中列被切换。由于列数，我需要使用水平流来使其全部适合里面。但是，标题和列本身的大小变得太小以至于无法读取。所以我必须为每列设置一个最小宽度。

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

我创建了一个沙盒链接，其中包含未正确调整大小的表格。

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 类更改display: block; 来解决。按预期工作。