1

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

heunetik
  • 567
  • 1
  • 8
  • 21
  • But table header should be always at the top and doesn't overflow –  Aug 05 '19 at 12:56
  • This solution brokes all table view –  Aug 05 '19 at 13:02
  • Possible duplicate: https://stackoverflow.com/questions/23989463/how-to-set-tbody-height-with-overflow-scroll but not a proper fix as it messes style. – Rajesh Aug 05 '19 at 13:09

1 Answers1

0

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

tfazekas
  • 46
  • 5