reactjs - 如何使 React js Material-UI 表具有响应性并使其具有相等的列间距？

Question

我正在使用 Material 表来自 material-ui但是我遇到了两个问题。
1. 如何使我的列等距，因为在前两列之后，第三列有一个巨大且不必要的空间。
2. 这个特定的表没有响应，我如何让它响应？

<MaterialTable
        title="All Surveys"
        columns={this.state.columns}
        data={this.state.data}
        options={{
          actionsColumnIndex: -1,
          exportButton: true,
          draggable: true,
        }}
        editable={{
          onRowAdd: (newData) => this.addNew(newData),
          onRowUpdate: (newData, oldData) => this.update(newData, oldData),
          onRowDelete: (oldData) => this.delete(oldData),
        }}
      />

从下图中，您可以看到第 2 行和第 3 行之间不必要的空间

从下图中，您可以看到表格对移动设备尺寸没有响应

Answer 1

您可以在列之间实现相等的间距，那么您应该这样做:<Table>使用 table-layout: 'fixed' CSS prop，导致所有列具有相同的宽度，结合 white-space: 'nowrap'在每个表格单元格上处理溢出。
为了实现响应式表格布局，这可能会有所帮助:here