How do I make React js Material-UI table responsive as well as make it have equal column spacing?

Question

I'm using MaterialTable from material-ui but there are two problems I'm having.

1. How do I make my columns equally spaced since, after the first two columns, there is a huge & unnecessary space to the 3rd column.

2. This particular table is not responsive, how do I make it responsive?

<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),
        }}
      />

• From the image below, you can see the unnecessary space between 2nd and 3rd row

• From the image below, you can see the see that the table isn't responsive on mobile size

Answer 1

您可以在列之间实现相等的间距，那么您应该这样做：

<Table>使用table-layout: 'fixed'CSS 属性，导致所有列具有相同的宽度，并结合white-space: 'nowrap'每个表格单元格来处理溢出。

为了实现响应式表格布局，这可能会有所帮助：这里