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

Posted 2023-02-22

【中文标题】如何在 Material-ui 表中添加垂直列分隔符

【英文标题】：How can i add a vertical column divider in Material-ui table

【发布时间】：2021-04-30 08:28:29

【问题描述】：

我创建了一个给定高度的表格（比如 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;

【问题讨论】：

你能分享你的代码吗？或提供更多详细信息。

我已经分享了代码

这句话我没看懂。 （但我希望即使我没有任何 TableCell 也应该有垂直列分隔符。）请详细解释

正如你在图片中看到的......在标题部分，我有一个 TableCell（Col1，Col2 ......这里）。当我在 TableCell 上添加 CSS 时，我在它们之间有线条。但是桌子的主体是空的，所以没有垂直线！简而言之，我只是用垂直线划分列

【参考方案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 以查看标题行实际上填满了所有可用空间。

【讨论】：

edited bc TableHeader 与tableRowGroup 配合不佳

但是 TableHead 占用了整个空间！我只希望标题位于顶部，水平线位于表格的高度