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

Question

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

我已经在codeandbox上做了一个小例子：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上有问题）

这样的结果

编辑：@flitz反馈后，我的解决方案在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