ReactJS和MaterialUI:表格的所有列的宽度相等 [英] ReactJS and MaterialUI: equal width for all columns of a Table

问题描述

使用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.

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

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

实际上，我可以将所有列的宽度设置为33％，并且在这种情况下可以使用，但是如果列数可变，则会变得很复杂. 使用ReactJS和MaterialUI表具有相等宽度的列的标准方法是什么?

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?

推荐答案

我使列具有width: 'calc(100%/3)'，因此它将具有3个等宽的列 我制作了一个CustomTableCell以包含常见样式width: 'calc(100%/3)'

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

沙箱: https://codesandbox.io/s/6l1ypx6v3r (在FireFox上已发布)

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

这样的结果

@flitz反馈后，我的解决方案在FireFox上不起作用.我做了一些更改，以便它也可以更好地支持Firefox

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

使用此CustomTableCell

with this CustomTableCell

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

沙盒(FireFox的修复问题): https://codesandbox.io/s/xolxro983p

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

这篇关于ReactJS和MaterialUI:表格的所有列的宽度相等的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！