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?

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

Solution 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

Solution 3

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

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

Solution 4

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

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

Solution 5

To remove the table border lines:

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

View more solutions

Comments

[Someone Special]

where can u find more info on tableCellClasses?

[NearHuscarl]

@SomeoneSpecial every MUI component has a [component]Classes const. It's briefly mentioned here.

[Someone Special]

This piece of info worth more points than the answer itself 😍

[Mrk Sef]

import { TableCell, tableCellClasses } from '@mui/material' worked for me :) - makes for a nicer looking import line