I have designed a table with a specified height (such as 70vh). I am looking to add a vertical column divider that spans the entire height of the table. I can achieve this using CSS for the TableCell component. However, I want the vertical column divider to be present even when there are no TableCells.
import React from "react";
//MUI Components
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;