Material UI v1表格滚动（溢出：滚动）

Question

如何在Material UI v1（目前为v1-beta）中创建带有滚动溢出的表格？在MUI文档的组件演示中没有这样的示例。

- vladimirp

Answer 1

在所有表格示例中，都会对包含表格的 div 应用一个类来配置水平滚动条。除非您使用足够小的视口查看文档，否则不明显。(请参见 BasicTable.js)：

const styles = theme => ({
  paper: {
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflowX: 'auto',
  },
});

paper类应用于根元素：

function BasicTable(props) {
  const classes = props.classes;

  return (
    <Paper className={classes.paper}>
      <Table>
        ...

如果你想要垂直滚动，你需要指定高度并考虑使用overflow-y。如果你想要水平和垂直滚动，可以设置overflow，这样两个轴都会被配置：

const styles = theme => ({
  paper: {
    height: 300,
    width: '100%',
    marginTop: theme.spacing.unit * 3,
    overflow: 'auto',
  },
});

注意： 这不会修复您的列标题，因为它是应用于容器。此调整将为整个表格（标题、正文、页脚等）应用滚动条。

- Ken Gregory

---

有没有办法在启用垂直滚动条的情况下保持页眉固定在原位，仅对正文部分启用滚动条？ - Matx

mui有一个stickheader，参考链接：https://mui.com/material-ui/react-table/#sticky-header 或者你可以尝试使用CSS的position: sticky属性。 - moon548834

Answer 2

为了使表头固定并滚动表格主体，我想出了这个解决方案。

首先，我在每个表组件中添加了“component =”div“”属性，以完全摆脱表骨架。

然后，我在Table、TableHead、TableBody和TableCell中添加了"display: block"规则，以覆盖材料规则。

TableRow将获得"display: flex"。

TableBody将获得所需的固定"(max-)height"，加上"overflow: auto"。

当然，通过使用div而不是表标记，标题和正文单元格失去了表对齐。在我的情况下，我通过为第一个单元格设置固定的"width"（同样适用于标题中的第一个单元格和正文中的第一个单元格，或者您也可以选择百分比），再加上"flex-shrink: 0"来解决这个问题。

第二个单元格获得了"flex-grow: 1"。

注意：使用Material UI v1。

- iulial

---

在这里有一些关于使用position: "sticky"修复表头行的细节在Github上。 - sophiemachin

Answer 3

在表格上使用"stickyHeader"属性，例如<Table stickyHeader>...</Table>

- Kevin Danikowski