时间戳

首页 > 解决方案 > 如何在 Material-ui 表中添加垂直列分隔符

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

问题描述

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

在此处输入图像描述

标签： htmlcssmaterial-ui

解决方案

我设法通过不使用来做这样的事情TableHeader： 在此处输入图像描述

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

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以查看标题行实际上填充了所有可用空间。

推荐阅读