如何使用 ReactJS 为表格中的所有列指定固定宽度？

Question

我正在检索一些实体数量可变并在我的表中显示为列的数据。我希望所有列都有固定的宽度。但是当我尝试这样做时，我发现没有遵守宽度，并且每列都根据可用的总空间进行拉伸。

沙盒示例： https://codesandbox.io/s/frosty-sid-ceugx?file=/src/App.js

但只需删除单个表格上的列宽，我就可以让所有其他列遵守它们的宽度，并且现在只有这一列继续拉伸。

沙盒示例： https://codesandbox.io/s/sweet-flower-wuq2b?file=/src/App.js

如何强制所有列的宽度，而不是让表格拉伸整个宽度？请注意，我想避免指定总表格宽度，因为这是根据加载的数据而变化的。

Answer 1

解决了这个问题。在“表格”标签上设置style={{ width: "auto", tableLayout: "auto"}。

演示： https://codesandbox.io/s/hungry-surf-vb4ts?file=/src/App.js