如何使表体垂直滚动material-ui？

Question

Property height doesn't apply to tbody element. Is it possible to make table body scrollable?

const styles = {
  tableBody: {
    height: 300,
    overflow: "auto"
  }
};

 <Paper className={classes.root}>
    <Table>
      <TableHead>
        <TableRow>
          <TableCell>Dessert (100g serving)</TableCell>
          <TableCell align="right">Calories</TableCell>
          <TableCell align="right">Fat&nbsp;(g)</TableCell>
          <TableCell align="right">Carbs&nbsp;(g)</TableCell>
          <TableCell align="right">Protein&nbsp;(g)</TableCell>
        </TableRow>
      </TableHead>
      <TableBody className={classes.tableBody}>
        {rows.map(row => (
          <TableRow key={row.name}>
            <TableCell component="th" scope="row">
              {row.name}
            </TableCell>
            <TableCell align="right">{row.calories}</TableCell>
            <TableCell align="right">{row.fat}</TableCell>
            <TableCell align="right">{row.carbs}</TableCell>
            <TableCell align="right">{row.protein}</TableCell>
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </Paper>

Sandbox example https://codesandbox.io/embed/vigilant-night-zoidu

Answer 1

Wrap the table components to divs with some css like this:

• With scrollable headers: https://codesandbox.io/s/ly8vvm5o19
• With sticky headers: https://codesandbox.io/embed/material-demo-j54rg