javascript - 材质 UI 表格单元格相同的固定宽度

Question

我在下面有一个材料 UI 表。表格的所有列都适合大小为 205 像素。表格本身设置为 100% 宽度。因此，当我加载页面时，如果有可用空间表确实会变大。问题是如果没有足够的空间列需要根据其中的文本缩小，但它们没有。它们被困在 205px 宽度。

我删除了所有填充也没有帮助。每个单元格内的文本是一个输入字段，所以如果我将输入字段宽度和所有单元格设为 60 像素，宽度会下降到 191，但它仍然给每个单元格提供比它们需要的更大的宽度，因此列比它们应该的大得多。我改变了表格的宽度，容器的宽度都没有帮助。

我有非常精确的表结构，就像这里的例子一样； https://codesandbox.io/s/github/tannerlinsley/react-table/tree/master/examples/material-UI-enhanced-table

如果您在此示例中也看到不必要的表列太大。是什么导致列比它们需要的大得多？为什么它们都固定在某个尺寸上？

标签： javascripthtmlcssreactjsmaterial-ui

Answer 1

表格单元格中的输入具有默认宽度，并且使列不可收缩，将输入宽度更改为 100% 可能会使输入采用父宽度。 https://codesandbox.io/s/optimistic-benz-ilnz2