React - Material UI：如何从表格中删除滚动条

Question

我已经按照以下说明构建了一个带有 React 和 Material UI 的简单表格： https: //material-ui.com/components/tables/#table。

它工作正常，但滚动条让我烦恼。

是否有一个选项可以让滚动条从红色箭头开始？或者完全删除它？

先感谢您

代码

    <TableContainer component={Paper} style={{maxHeight: 350}}>
    <Table className={styles.table} size="small" stickyHeader>
      <TableHead>
        <TableRow >
          <TableCell className={styles.header}>
            <Checkbox checked={allSelected} onClick={handleSelectAll} color="primary"/>
          </TableCell>
          <TableCell className={styles.header} align="left">Name</TableCell>
          {props.showAdmin && <TableCell className={styles.header}>Admin</TableCell>}
        </TableRow>
      </TableHead>
      <TableBody>
        {props.employees.map(empl => (
          <TableRow key={empl.id}>
            <TableCell>
              <Checkbox checked={isSelected(empl.id)} onClick={() =>handleSelect(empl.id)} className={styles.checkBox} color="primary"/>
            </TableCell>
            <TableCell component="th" scope="row" style={{paddingRight: 30}}>{empl.name}</TableCell>
            {props.showAdmin && <TableCell align="center"><Checkbox disabled checked={empl.isAdmin} className={styles.checkBox}/></TableCell>}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

风格

createStyles({
  table: {
   maxWidth: 350,
   maxHeight: 300
  },
  header: {
   backgroundColor: '#123456',
   color: '#ffffff',
   fontSize: 18
 },
 checkBox: {
   paddingTop: 1,
   paddingBottom: 1,
 }
}),
);

Answer 1

如果删除 的maxHeight样式TableContainer，滚动将会消失。

<TableContainer component={Paper} style={{ maxHeight: 350 }}>

到

<TableContainer component={Paper}>

更新

如果你想从标题下方滚动，只需将相关的CSS添加到material-ui组件中Table即可TableBody。

<TableContainer component={Paper} style={{ maxHeight: 350 }}>

参考：

• 如何使用溢出滚动设置主体高度

• 如何使用 tbody-in-html 完全填充 a-table-100

网上试试：