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

Question

我使用在 这个页面 上发布的演示，在 react 中制作了一个表格。虽然它已经可以正常工作，但我还想知道如何更改不同列的宽度和填充。

我尝试手动设置每个单元格的宽度，例如：

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

除了使用const样式，然后引用它，但两者都没有起作用。有人有什么想法吗？当单元格如此填充时，我真的很讨厌使用滚动功能。提前感谢！

编辑上面的代码实际上是有效的，但更改很小，几乎不可见——将宽度更改为1像素仍然在单元格之间留下巨大的空间。可能是填充问题？我尝试过以几种方式设置填充为0，但什么都没有发生。

- Uciebila

Answer 1

这里提供了一个示例，第一列具有自定义宽度并使用自定义CSS换行：

https://codesandbox.io/s/xv9orx4zrw

添加如下常量值，并在列中引用：

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

然后在TD中引用时，请像这样引用。

<CustomTableCell style={customColumnStyle}>

- Senthil

---

这只是我链接的网站上的一个示例，它没有任何自定义的列宽吗？ - Uciebila

请使用更新后的URL https://codesandbox.io/s/xv9orx4zrw 进行尝试。 - Senthil

它可以改变背景颜色，但是无论我输入1还是1000，更改maxWidth都没有任何区别。但是在链接的代码框中可以正常工作，所以我不确定为什么当所有内容相同时会出现这种情况。 - Uciebila

实际上，在1000的大小下确实会有非常非常微小的差异，但足以使我第一次没有注意到。我目前正在使用最大宽度1像素，因为这仍然在列之间留下了巨大的间隔。 - Uciebila

没关系，我尝试了所有行的填充数字，并成功找到了适当的填充/宽度数字，使其正常工作。 - Uciebila

Answer 2

我在问题中提到，宽度和内边距无法实现列之间更小的空间，但是如果两者结合使用，并尝试不同的数字，它们可以使空间变得更小（对于我的情况，1像素的宽度和20像素的内边距效果非常好）。因此，问题中提供的代码是有效的，只需要添加“padding: 20px”即可生效。

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

- Uciebila

---

如果您觉得这个答案有用，请将其标记为正确答案。 - Senthil

Answer 3

我也遇到了一些问题，找到了这个页面，但是给出的建议对我没有用。所以我在<TableCell>中添加了任何标签<div style={{width:300}}><p style={{width:300}}>，就像这样，它起作用了。

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

希望这对其他人也有用。

- kirti aruja