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

Question

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

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

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

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

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

标签： cssreactjshtml-tableflexboxmaterial-ui

Answer 1

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

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