如何使用具有特定表格宽度的 React Table Hooks 调整列大小

Question

我正在尝试使用React-Table和 Hook useResizeColumns来实现调整大小功能。我想强制表格始终占据其容器的整个宽度。只有列应该改变它们的大小。不是桌子。如果您看一下我在这里制作的这个示例。(Codesandbox) 您可以轻松调整列的大小以超过红色容器。由于某种原因，如果您最小化列大小，表格将始终适合容器！

我不明白这里的行为。有任何想法吗 ？非常感谢。

Answer 1

找到了修复方法。您需要修复表格的 CSS 以使其具有 display:inline-block; 。奇怪的是 CSS 解决了这个问题:-)。您可以在这里看到已修复的问题https://codesandbox.io/s/react-table-with-full-width-forked-rbi6u

 .table {
  border: 2px red solid;
  display:inline-block;
}

请再次尝试沙箱，因为我错过了将修复程序保存在codesandbox中。