ReactJS 和 MaterialUI：表格所有列的宽度相等

Question

使用 ReactJS 和 MaterialUI 我试图让表格的所有列具有相同的宽度。 当我没有设置任何宽度时，我希望将此作为默认行为，但事实并非如此：最后一列总是较小。

我在codesandbox上做了一个小例子：https://codesandbox.io/s/18l6nn393q

实际上我可以将所有列的宽度设置为 33%，这对于这种特定情况是有效的，但如果列数可变，事情就会变得复杂。 使用 ReactJS 和 MaterialUI 表格获得等宽列的标准方法是什么？

Answer 1

我让列有

width: 'calc(100%/3)'

所以它将有 3 个等宽的列 我制作了一个 CustomTableCell 来包含常见样式

width: 'calc(100%/3)'

const CustomTableCell = withStyles(theme => ({
  root: { 
    width: 'calc(100%/3)'
  }
}))(TableCell);

沙箱：https://codesandbox.io/s/6l1ypx6v3r（在 FireFox 上有问题）

结果是这样的

编辑：@fitz 反馈后，我的解决方案在 FireFox 上不起作用。我做了一些更改，以便它也可以更好地支持 Firefox

使用这个 CustomTableCell

const CustomTableCell = withStyles(theme => ({
  root: {
    width: "calc(100vw/3)",
    padding: "10px 24px",
    display: "table-cell"
  }
}))(TableCell);

沙盒（修复 FireFox 问题）：https://codesandbox.io/s/xolxro983p