Reactjs And Materialui: Equal Width For All Columns Of A Table

Using ReactJS and MaterialUI I'm trying to have the same width for all columns of a Table. I expected to have this as a default behavior when I'm not setting any width, but it's no

Solution 1:

I make column have width: 'calc(100%/3)' so it will have 3 equal width column I made a CustomTableCell to contain common style width: 'calc(100%/3)'

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

Sandbox: https://codesandbox.io/s/6l1ypx6v3r (have issue on FireFox)

Result like this

Edit: after @flitz feedback my solution not work on FireFox. I made some change so it can better support with Firefox also

with this CustomTableCell

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

Sandbox (fix issue with FireFox): https://codesandbox.io/s/xolxro983p