Material-UI 表格溢出其表格包装器

Question

我的 material-ui 表格可以调整大小并水平滚动，但是表格元素及其子元素溢出，在页面右侧不可见。 这是行为的 GIF。 https://imgur.com/a/ecteOrc

以及被检查元素的图像。 https://imgur.com/a/2Tgv8s5

什么可能导致这种行为？

const styles = theme => ({
  root: {
    width: '100%',
    marginTop: theme.spacing.unit * 3
  },
  table: {},
  tableWrapper: {
    overflowX: 'auto'
  }
});

.

<Paper className={classes.root}>
        <EnhancedTableToolbar
          numSelected={selected.length}
          tableTitle={'Accounts'}
        >
          <AccountFilterList />
        </EnhancedTableToolbar>
        <div className={classes.tableWrapper}>
          <Table className={classes.table} aria-labelledby='tableTitle'>
            <EnhancedTableHead
              numSelected={selected.length}
              order={order}
              orderBy={orderBy}
              onSelectAllClick={this.handleSelectAllClick}
              onRequestSort={this.handleRequestSort}
              rowCount={data.length}
              columnData={columnData}
            />
            <TableBody>
              {data
                .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
                .map(n => {
                  const isSelected = this.isSelected(n.ref);
                  return (
                    <TableRow
                      hover
                      onClick={event => this.handleRowClick(event, n.ref)}
                      role='checkbox'
                      aria-checked={isSelected}
                      tabIndex={-1}
                      key={n.ref}
                      selected={isSelected}
                    >
                      <TableCell padding='checkbox'>
                        <Checkbox
                          checked={isSelected}
                          onChange={event => this.handleClick(event, n.ref)}
                        />
                      </TableCell>
                      <TableCell>
                        <Avatar
                          alt={n.name}
                          src={`//logo.clearbit.com/${n.clearBit}`}
                          onError={e => {
                            e.target.src =
                              'https://doxhze3l6s7v9.cloudfront.net/app/static/img/company-default-img.png';
                          }}
                        />
                      </TableCell>
                      <TableCell>{n.name}</TableCell>
                      <TableCell>{n.owner}</TableCell>
                      <TableCell numeric>{n.dateCreated}</TableCell>
                    </TableRow>
                  );
                })}
              {emptyRows > 0 && (
                <TableRow style={{ height: 49 * emptyRows }}>
                  <TableCell colSpan={6} />
                </TableRow>
              )}
            </TableBody>
          </Table>
        </div>
        <TablePagination
          component='div'
          count={data.length}
          rowsPerPage={rowsPerPage}
          page={page}
          backIconButtonProps={{
            'aria-label': 'Previous Page'
          }}
          nextIconButtonProps={{
            'aria-label': 'Next Page'
          }}
          onChangePage={this.handleChangePage}
          onChangeRowsPerPage={this.handleChangeRowsPerPage}
        />
      </Paper>

Answer 1

您的 Parent 包装器必须指定一些宽度，这就是它在右侧占用该空间的原因。检查该空白是由表格元素还是父包装元素（AppBar）引起的。