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

Posted 2023-02-22

【中文标题】React - Material UI：如何从表格中删除滚动条

【英文标题】：React - Material UI: How to remove scrollbar from table

【发布时间】：2020-06-27 23:21:21

【问题描述】：

我使用以下说明构建了一个带有反应和材料 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,
 
),
);

【问题讨论】：

你能做一个在线演示吗？因为我们可以在官方文档中找到滚动条默认隐藏6hft4n.run.stackblitz.io

我无法使用您的链接，但我确实在这里创建了一个：codesandbox.io/s/upbeat-wilbur-ck0wq 我复制了我的确切代码。谢谢@keikai

【参考方案1】：

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

<TableContainer component=Paper style= maxHeight: 350 >

到

<TableContainer component=Paper>

---

更新

如果您想从标题下方滚动，只需将相关的 CSS 添加到 material-ui 组件 Table 和 TableBody 就可以了。

table: 
  display: "block",
  maxWidth: 350,
,
body: 
  display: "block",
  overflow: "auto",
  height: "300px"
,

参考：

how-to-set-tbody-height-with-overflow-scroll

how-do-i-completely-fill-a-table-100-with-tbody-in-html

在线试用：

---

【讨论】：

是的，但是有了额外的项目，列表会无限增长，我打算将此组件嵌入到其他组件中。你有别的想法吗？

谢谢你，因为它对我帮助很大。您是否知道如何使可滚动部分与整个区域一样宽并将列与标题对齐？ @keikai

@Taldorr 已更新，如果这篇文章解决了您的问题，请接受它，我们将不胜感激。

感谢您的输入，图片看起来很有希望，但是一旦您更改员工姓名的长度或在应用程序组件中启用 showAdmin，它就无法正常工作。尽管如此，你的答案是最好的:)

【参考方案2】：

要使用jss材质ui来移除滚动条，这样做很简单

container_with_scrolls:
    overflowX:'scroll',
    '&::-webkit-scrollbar':
        width:0,
    
,