Question

我已经使用their page上的演示制作了一个表来进行响应，这很好用，但是我想知道如何更改不同列的宽度/填充。

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

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

以及使用const样式然后引用它，但均无效。有人有什么想法吗？当单元格如此荒谬地填充时，我真的很讨厌不得不使用滚动功能。预先感谢！

编辑上面的代码确实有效，但是更改很小，难以察觉-将宽度更改为1px仍在单元格之间留有很大的空间。可能是填充问题？我尝试以几种方式将padding设置为0，但没有任何反应。

Answer 1

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

添加如下所示的常量值，并在列

中引用它

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

然后在TD中引用这样

<CustomTableCell style={customColumnStyle}>

Answer 2

我在一个问题中说过，宽度和填充不能使列之间的间距变小，但是如果将它们一起使用并尝试使用不同的数字，它们可以使间距变小（对于我来说，宽度为1像素，填充为20像素时效果很好）。因此，仅需添加问题中提供的代码“ padding: 20px”即可使其生效。