表格重叠在Paper上，并在较小的屏幕上自动溢出

Question

因此，我将Material-ui用作我的ui套件。当使用较小的屏幕时，我只希望我的表可滚动。它适用于桌面视图和平板电脑视图。在移动时，桌子与它的容器重叠，该容器是一个纸质部件。

这是我的代码

<Grid container direction="row" justify="center" alignItems="center" spacing={16}>
        <Grid item md={4}>
          <Paper className={classes.root}>
            <Table className={classes.table}>
              <TableHead>
                <TableRow>
                  <TableCell align="right">Stock</TableCell>
                  <TableCell align="right">Value</TableCell>
                  <TableCell align="right">Last</TableCell>
                  <TableCell align="right">Change</TableCell>
                  <TableCell align="right">%Change</TableCell>
                </TableRow>
              </TableHead>
              <TableBody>
                {rows.map(row => (
                  <TableRow key={row.id}>
                    <TableCell align="right">{row.stock}</TableCell>
                    <TableCell align="right">{row.value}</TableCell>
                    <TableCell align="right">{row.last}</TableCell>
                    <TableCell align="right">{row.change}</TableCell>
                    <TableCell align="right">{row.percent}</TableCell>
                  </TableRow>
                ))}
              </TableBody>
            </Table>
          </Paper>
        </Grid>
      </Grid>

和我的风格

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