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

Question

我使用发布在 他们页面 上的演示制作了一个反应表，这工作正常但我想知道如何更改不同列的宽度/填充。

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

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

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

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

原文由 Uciebila 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

原文由 Uciebila 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

https://codesandbox.io/s/xv9orx4zrw

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

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

然后在TD中这样引用

<CustomTableCell style={customColumnStyle}>

原文由 Senthil 发布，翻译遵循 CC BY-SA 4.0 许可协议