时间戳

首页 > 解决方案 > ReactJS 和 MaterialUI：表的所有列的宽度相等

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

问题描述

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

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

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

标签： reactjshtml-tablematerial-ui

解决方案

我让列有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

推荐阅读