如何更改 Material-ui React 表中的表格单元格宽度

Question

我已经使用他们页面上发布的演示制作了一个表格，这很好，但我想知道如何更改不同列的宽度/填充。

我试过手动设置每个单元格的宽度，如下所示：

<TableCell style={{ width: "10%" }}> Number </TableCell>

以及使用 const 样式然后引用它，但都不起作用。 有没有人有任何想法？ 当单元格被填充得如此荒谬时，我真的很讨厌不得不使用滚动 function。 提前致谢！

编辑上面的代码确实有效，但是变化很小，所以不明显 - 将宽度更改为 1px 仍然会在单元格之间留下巨大的空间。 可能是填充问题？ 我尝试通过几种方式将填充设置为 0，但没有任何反应。

Answer 1

请参阅此处，我为第一列添加了一个示例，该示例具有自定义宽度并使用自定义 CSS 包装内容：

https://codesandbox.io/s/xv9orx4zrw

添加如下所示的常量值并在列中引用它

const customColumnStyle = { maxWidth: "5px", backgroundColor: "green" };

然后在 TD 中这样引用

<CustomTableCell style={customColumnStyle}>

Answer 2

我在问题中指出，宽度和填充不能实现列之间更小的空间，但是如果两者一起使用并尝试使用不同的数字，它们可以使空间更小（对于我的情况，1px 宽度，和 20px 填充效果很好）。 因此，问题中提供的代码有效，只需添加“ padding: 20px ”即可生效。

设置最大宽度也很有用，因为它使所有单元格的宽度固定

Answer 3

我也遇到了一些问题，并在此页面上找到了解决方案，但没有为我提供给定的建议。 所以我像这样在<Tablecell>中添加了任何标签<div style={{width:300}}> <p style={{width:300}}>并且它起作用了。

<TableCell><p style={{width: 300}}>{row.address}</p></TableCell>

希望这也适用于其他人