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

Question

我创建了一个给定高度的桌子（比如 70vh）。我想要一个垂直的列分隔线来覆盖桌子的整个高度。我可以使用 TableCell 的 CSS 添加它。但我希望即使我没有任何 TableCell，verticle 列分隔线也应该在那里。

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

设法做到了这样的事情：

我在

height

表中添加了

70vh

，因此它与容器的高度相同。然后我将

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;

您可以删除

TableRow

中的

TableBody

来查看标题行实际上填充了所有可用空间。