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 not the case: the last column is always smaller.

I've made a small example on codesandbox: https://codesandbox.io/s/18l6nn393q

Actually I could set the width of all columns to 33% and it would work for this specific case, but it gets complicated if the number of columns is variable. What is the standard way to have columns of equal width using ReactJS and the Table of MaterialUI?

回答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)'

const CustomTableCell = 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

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

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

来源：https://stackoverflow.com/questions/52578578/reactjs-and-materialui-equal-width-for-all-columns-of-a-table