如何创建固定位置表页脚？

Question

我正在使用 React 和 Material UI 框架。

如何使表格的最后一行固定在适当的位置？在页面底部，该行始终可见。

这是我尝试过的演示，但由于某种原因，表格单元格无法正确对齐。似乎属性display: contents控制了这种行为，但使用固定位置与之相矛盾。

Answer 1

Material UI Table 现在随TableFooter组件一起提供。所以只需复制TableHead > TableCell并仅将 CSS 更改top:0为bottom:0. MuiTableCell或者你可以像这样覆盖：

export default createMuiTheme({
    overrides: {
        MuiTableCell: {
            footer: {
                left: 0,
                bottom: 0, // <-- KEY
                zIndex: 2,
                position: 'sticky'
            }
        }
    }
})

还要设置TableBody margin-bottom来匹配页脚高度。