How to remove lines between cells in Material UI Table

I tried editing all sorts of CSS and elements of Table and TableCells but still I can't make the lines go away. How do you make lines go away between rows in the Table element in Material UI?

6 Answers

As mentioned by Soothran in the comments, this is controlled by the bottom border of TableCell. Below is one way to customize this.

import MuiTableCell from "@material-ui/core/TableCell"; const TableCell = withStyles({ root: { borderBottom: "none" } })(MuiTableCell); 

If you're using MUI v5, you can use the sx props. The new MUI release also added tableCellClasses object to help you reference the component CSS className in a type-safe way instead of using the hardcoded string "MuiTableCell-root":

import Table from "@mui/material/Table"; import TableCell, { tableCellClasses } from "@mui/material/TableCell"; 

<Table sx={{ [`& .${tableCellClasses.root}`]: { borderBottom: "none" } }} > 

Live Demo

To remove the border lines of the particular Table Cell use :

<TableCell style={{borderBottom:"none"}}></TableCell> 

To remove the border from a specific TableRow you can use:

sx={{ "& td": { border: 0 } }} 

classes={{ root: classes.MuiTableCell}} class of a Tablecell,then MuiTableCell: { borderBottom: "none" }

This works me fine to remove the BorderBottom line of a tablecell.

To remove the table border lines:

.MuiDataGrid-root .MuiDataGrid-cell {border-bottom: none !important;}