如何在 Material-ui 表中添加垂直列分隔符

Question

我创建了一个给定高度的表格（比如 70vh）。我想要整个表格高度的垂直列分隔符。我可以使用 CSS for TableCell 添加它。但我希望即使我没有任何 TableCell 也应该存在垂直列分隔符。

import React from "react";

//MUI Stuffs
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";

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";

const useStyles = makeStyles((theme) => ({
  tableContainer: {
    maxWidth: "150vh",
    margin: "auto",
    marginTop: "15vh",
    height: "70vh",
    background: "#ccffff",
    borderWidth: 2,
    borderColor: "black",
    borderStyle: "solid",
  },
  tableCell: {
    borderRightStyle: "solid",
    borderRightColor: "black",
  },
  tableHead: {
    borderBottomStyle: "solid",
    borderBottomColor: "blue",
    borderBottomWidth: 3,
  },
}));

function Canvas() {
  const classes = useStyles();
  const cols = ["Col1", "Col2", "Col3", "Col4", "Col5"];
  return (
    <TableContainer component={Paper} className={classes.tableContainer}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead className={classes.tableHead}>
          <TableRow>
            {cols.map((col) => (
              <TableCell align="center" className={classes.tableCell}>
                {col}
              </TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          <TableRow></TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default Canvas;

Answer 1

通过不使用TableHeader，我设法做到了这样的事情：

我在70vh 的表中添加了一个height，因此它与容器的高度相同。然后我将tableCell 的显示类型更改为tableRowGroup，这允许列灵活地填充可用空间。我已经完全删除了TableHead，因为 MUI 正在强制 table-header-group 的 CSS 显示，它不会扩展以填充表空间。

import React from "react";

//MUI Stuffs
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";

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 TableRow from "@material-ui/core/TableRow";

const useStyles = makeStyles((theme) => ({
  tableContainer: {
    maxWidth: "150vh",
    margin: "auto",
    marginTop: "15vh",
    height: "70vh",
    background: "#ccffff",
    borderWidth: 2,
    borderColor: "black",
    borderStyle: "solid"
  },
  table: {
    height: "70vh"
  },
  tableCell: {
    borderRightStyle: "solid",
    borderRightColor: "black",
    display: "tableRowGroup"
  }
}));

function Canvas() {
  const classes = useStyles();
  const cols = ["Col1", "Col2", "Col3", "Col4", "Col5"];
  return (
    <TableContainer component={Paper} className={classes.tableContainer}>
      <Table className={classes.table} aria-label="simple table">
        <TableRow>
          {cols.map((col) => (
            <TableCell align="center" className={classes.tableCell}>
              {col}
            </TableCell>
          ))}
        </TableRow>
        <TableBody>
          <TableRow>
            {cols.map((col) => (
              <TableCell align="center" className={classes.tableCell}>
                {col}
              </TableCell>
            ))}
          </TableRow>
        </TableBody>
      </Table>
    </TableContainer>
  );
}

export default Canvas;

您可以删除TableBody 中的TableRow 以查看标题行实际上填满了所有可用空间。