Material UI表格水平滚动

Question

Material UI表格水平滚动

18

我正在处理我的material-ui的水平滚动条问题。尽管我阅读了文档并浏览了一些相关话题，但我无法找到解决我的问题的方法。水平滚动条从未出现过...真是很烦人

这是我代码的一部分：

App.js

     <div style={{ height: '100vh', overflow: 'auto', width: '600px' }}>
        <TableHeader headerlabels={headers} datarows={resu} />
     </div >

TableHeader.js

表头组件（TableHeader.js）

const HeaderTableCell = styled(TableCell)`
&&{
    background-color:#092e68;
    color:white;
    top:0;
    position:sticky;
}
`;

const CustomTableCell = styled(TableCell)`
&&{
    background-color:white;
    color:#092e68;
}
`;


// key, label
const TableHeader = props => {
    const { headerlabels, datarows } = props
    return (
        <Table>
            <TableHead >
                <TableRow key={uuid.v4()} >
                    {headerlabels.map((label) =>
                        (<HeaderTableCell {...props} key={label}>{label}</HeaderTableCell>))}
                </TableRow>
            </TableHead>
            <TableBody >
                {datarows.map((value, id) =>
                    (
                        <TableRow key={id} >
                            {headerlabels.map((label) =>
                                (<CustomTableCell {...props} key={label}>{value[label]}</CustomTableCell>))}
                        </TableRow>
                    )
                )}
            </TableBody >
        </Table>
    )
};

- Jerome

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Ryan Cogswell · Accepted Answer

更新在我最初的回答时，这是按照下面指示处理的(使用 overflowX: 'auto'将表格包装在一个纸张内)，但当前演示则通过将 Table 包装在 TableContainer 中处理，处理 overflowX: 'auto'。

如果您查看简单表格演示的代码，您会发现它是通过使用带有overflowX:'auto'的Paper来包装表格处理的。