如何在 Material-ui React table 中更改 Table 单元格宽度

Question

我使用 their page 上发布的演示在 React 中做了一个 table，效果很好，但我想知道如何更改不同列的 width/padding。

我试过像这样手动设置每个单元格的宽度：

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

以及使用 const 样式然后引用它，但都不起作用。有人有什么想法吗？当单元格填充得太荒谬时，我真的很讨厌不得不使用滚动功能。提前致谢！

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

Answer 1

看到这里，我为第一列添加了一个示例，使其具有自定义宽度并使用自定义 CSS 包装内容：

添加如下常量值并在列

中引用它

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

然后在TD中这样引用

<CustomTableCell style={customColumnStyle}>

Answer 2

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

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

How to change Table Cell width in Material-ui React table