我正在为我的用户界面使用水平滚动条。 尽管我阅读了文档并在此处浏览了一些主题,但找不到解决该问题的方法。水平滚动条从不显示。.非常烦人
这是我的代码的子集:
App.js
<div style={{ height: '100vh', overflow: 'auto', width: '600px' }}>
<TableHeader headerlabels={headers} datarows={resu} />
</div >
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>
)
};
答案 0 :(得分:1)
如果您查看Simple Table演示的代码,您会发现它通过将表包装在带有overflowX: 'auto'
的文件中来处理此问题。
答案 1 :(得分:0)
您几乎可以使用文档中的任何表格。默认情况下,某些时间支持水平滚动。