Таблица наложена на бумагу с автоматическим переполнением на меньшем экране Material-UI

Question

Так что я использую материал-интерфейс в качестве набора.Я просто хочу, чтобы мой стол прокручивался при использовании меньшего экрана.Работает в режиме рабочего стола и планшета.Находясь в мобильном телефоне, стол перекрывал свой контейнер, являющийся компонентом бумаги.

Вот мой код

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