react把表格渲染好ui_ReactJS和MaterialUI：表格中所有列的宽度相等

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?

解决方案

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);

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);