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

【问题标题】：ReactJS and MaterialUI: equal width for all columns of a TableReactJS 和 MaterialUI：表的所有列的宽度相等
【发布时间】：2019-03-05 19:45:56
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs html-table material-ui

【解决方案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

【讨论】：

沙盒不工作（看起来只是我的分支，没有你的改变），你能编辑它吗？
您好，我修改了沙盒和沙盒链接。请检查
好的，谢谢。我在 Firefox 和 Edge 上测试了您的解决方案：它适用于 Edge，但不适用于 Firefox。可能是 MaterialUI 的问题？
嗨@Fitz，我用一些样式进行了修改，使其也可以在 FireFox 上正确显示。请查看codesandbox.io/s/xolxro983p
@Fitz 如果我的回答正确，请标记为正确。谢谢