Reactjs 如何创建固定位置表尾？

我正在使用React和materialui框架

如何将桌子的最后一行固定到位？在页面底部，该行始终可见

---

这是我尝试过的一个例子，但由于某些原因，表格单元格无法正确对齐。属性

display:contents

似乎控制了此行为，但使用“位置固定”与此相反。

您需要在新的

table

元素中添加“粘性页脚”表格单元格数据，以保持正确的格式

试试这个：

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Table from "@material-ui/core/Table";
import TableBody from "@material-ui/core/TableBody";
import TableCell from "@material-ui/core/TableCell";
import TableContainer from "@material-ui/core/TableContainer";
import TableHead from "@material-ui/core/TableHead";
import TableRow from "@material-ui/core/TableRow";
import Paper from "@material-ui/core/Paper";
import { TableFooter } from "@material-ui/core";

const useStyles = makeStyles({
  table: {},
  stickyFooter: {
    bottom: 0,
    position: "fixed",
    backgroundColor: "#ffffff"
  }
});

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9),
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9),
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

export default function SimpleTable() {
  const classes = useStyles();

  return (
    <Paper>
      <Table stickyHeader className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>

        <TableBody>
          {rows.map(row => (
            <TableRow key={row.name}>
              <TableCell component="th" scope="row">
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
          <TableRow>
            <TableCell />
          </TableRow>
          <Table stickyHeader className={classes.table, classes.stickyFooter} aria-label="simple table">
              <TableRow>
                <TableCell>Dessert (100g serving)</TableCell>
                <TableCell align="right">Calories</TableCell>
                <TableCell align="right">Fat&nbsp;(g)</TableCell>
                <TableCell align="right">Carbs&nbsp;(g)</TableCell>
                <TableCell align="right">Protein&nbsp;(g)</TableCell>
              </TableRow>
          </Table>
        </TableBody>
      </Table>
    </Paper>
  );
}

从“React”导入React；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/表格”导入表格；
从“@material ui/core/TableBody”导入表体；
从“@material ui/core/TableCell”导入TableCell；
从“@material ui/core/TableContainer”导入TableContainer；
从“@material ui/core/TableHead”导入表头；
从“@material ui/core/TableRow”导入TableRow；
从“@material ui/core/Paper”导入纸张；
从“@material ui/core”导入{TableFooter}”；
const useStyles=makeStyles({
表：{}，
粘滞页脚：{
底部：0，
位置：“固定”，
背景颜色：“ffffff”
}
});
函数createData（名称、卡路里、脂肪、碳水化合物、蛋白质）{
返回{名称、卡路里、脂肪、碳水化合物、蛋白质}；
}
常量行=[
createData（“冷冻酸奶”，159,6.0,24,4.0），
createData（“冰淇淋三明治”，237,9.0,37,4.3），
createData（“Eclair”，262,16.0,24,6.0），
createData（“杯形蛋糕”，305,3.7,67,4.3），
createData（“姜饼”，356,16.0,49,3.9），
createData（“冷冻酸奶”，159,6.0,24,4.0），
createData（“冰淇淋三明治”，237,9.0,37,4.3），
createData（“Eclair”，262,16.0,24,6.0），
createData（“杯形蛋糕”，305,3.7,67,4.3），
createData（“姜饼”，356,16.0,49,3.9），
createData（“冷冻酸奶”，159,6.0,24,4.0），
createData（“冰淇淋三明治”，237,9.0,37,4.3），
createData（“Eclair”，262,16.0,24,6.0），
createData（“杯形蛋糕”，305,3.7,67,4.3），
createData（“姜饼”，356,16.0,49,3.9）
];
导出默认函数SimpleTable（）{
const classes=useStyles（）；
返回(
甜点（100克）
卡路里
脂肪（g）
碳水化合物（克）
蛋白质（g）
{rows.map（row=>(
{row.name}
{row.carries}
{row.fat}
{row.carbs}
{row.protein}
))}
甜点（100克）
卡路里
脂肪（g）
碳水化合物（克）
蛋白质（g）
);
}

物料UI表现在附带了

TableFooter

组件。所以只需复制

TableHead>TableCell

，只需将CSS

top:0

更改为

bottom:0

。或者您可以覆盖

MuiTableCell

，如下所示：

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

导出默认CreateMuiteme({
覆盖：{
多功能电池：{
页脚：{
左:0,，
底部：0，//感谢您的快速回答！只有当单元格内容与标题完全相同时，它才有效。否则，它将无法正确保持宽度。是的，因为一旦您将位置设置为“粘滞”，它就没有对原始图表的引用，因此您必须使用一些自定义样式来完成它。我不知道如何完成o这样做，但我的临时解决方案是使用嵌套网格，并为每个网格组件提供prop component=“table”/“td”/“tr”。。