我正在使用material-ui中的MaterialTable，但遇到了两个问题。
**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行
之间存在不必要的空间 - 从下图中，您可以看到检查床在移动的大小
上没有响应
5条答案
按热度按时间omvjsjqw1#
您可以在列之间实现相等的间距，然后您应该执行以下操作：
<Table>使用table-layout: 'fixed'CSS prop，使所有列具有相同的宽度，并在每个表单元格上结合white-space: 'nowrap'来处理溢出。要实现响应式表格布局，以下操作可能会有所帮助：here
qjp7pelc2#
@Shadow步行者，For setting column width...尝试为每个表格单元格设置一个类，然后设置它的宽度。考虑一下如果只有两列，并且在每个单元格宽度上设置为100%，它将均匀地对齐间距或使每个单元格占50%。您可以将此与其他列的像素大小混合（考虑如果在每前两个单元上50 px，在它们之后，其他单元格可以取一个百分比，它在设置px宽度后是合理的），然后我所做的更响应的感觉是隐藏断点上的单元格类。（'sm'）或相应地调整大小。不确定是否是最好的方法，但经过昨晚的尝试，我对表格对不同屏幕大小的响应以及我的列间距感到满意。
kuarbcqp3#
我通过将此CSS代码添加到.table类来实现。
注意：它水平滚动，看起来不知何故很好。
w6lpcovy4#
您可以使用flex属性并为每列设置成比例的宽度：
更多信息在mui网站：https://mui.com/components/data-grid/columns/#fluid-width
kqqjbcuj5#
如果您使用material-ui，您可以通过调整TableContainer的最小宽度来处理移动的响应，TableContainer是Table的父元素。
谢谢！