How to remove lines between cells in MUI Table

Question

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 MUI?

Answer 1

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);

Answer 2

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