Material-UI React Table 在渲染时抛出边框

Question

我正在寻找快速解决此问题的方法。似乎每当我从 Material-UI.com 表中的 API 调用返回的数据集进行渲染时（在样式方面没有添加会使其失效），它都会给我看起来像边框但有边距或填充到右侧的内容。有这方面的经验请告诉我。下面的图片显示了这一点：

此处表格代码：

<Table
                            selectable={false}
                            fixedHeader={true}
                            fixedFooter={false}
                            style={{
                                backgroundColor: Colors.purple
                            }}>
                            <TableHeader
                                enableSelectAll={false}
                                displaySelectAll={false}
                                adjustForCheckbox={false}>
                                <TableRow displayBorder={false}>
                                    <TableHeaderColumn
                                        style={{
                                            Colors.white
                                        }}>
                                        COLUMN HEADER
                                    </TableHeaderColumn>
                                    <TableHeaderColumn
                                        style={{
                                            color: Colors.white,
                                            width: 100
                                        }}>
                                        COLUMN HEADER
                                    </TableHeaderColumn>
                                    <TableHeaderColumn
                                        style={{
                                            color: Colors.white,
                                            width: 100
                                        }}>
                                        COLUMN HEADER
                                    </TableHeaderColumn>
                                </TableRow>
                            </TableHeader>
                            <TableBody
                                displayRowCheckbox={false}
                                stripedRows={true}
                                showRowHover={true}>
                                {this.state.ARRAY.map(function(row, index) {
                                    if (moment(row.START_OF_QUARTER).isSame(quarterSelected)) {
                                        return (
                                            <TableRow style={{color: Color.white}} key={index} displayBorder={false}>
                                                <TableRowColumn>
                                                    {row.User}
                                                </TableRowColumn>
                                                <TableRowColumn
                                                    style={{width: 100}}>
                                                    ${row.DATA}
                                                </TableRowColumn>
                                                <TableRowColumn
                                                    style={{width: 100}}>
                                                    {row.DATA}
                                                </TableRowColumn>
                                            </TableRow>
                                        );
                                    }
                                })}
                            </TableBody>
                        </Table>

Answer 1

当您想要快速修复时，请尝试：

<div style={{ overflowX: 'auto' }}>
    <Table> ... </Table>
</div>

我有预感，问题与溢出有关，尽管这会有点混乱，并可能导致不利的问题。