javascript - 如何使表体垂直滚动的 Material -ui？

Question

属性高度不适用于 tbody 元素。是否可以使表体可滚动？

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>

沙盒示例 https://codesandbox.io/embed/vigilant-night-zoidu

Answer 1

用这样的 css 将表格组件包装到 div 中:

• 带有可滚动标题:https://codesandbox.io/s/ly8vvm5o19
• 带有粘性 header :https://codesandbox.io/embed/material-demo-j54rg