score:31

Accepted answer

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

edit table no lines

score:1

classes={{ root: classes.muitablecell}} class of a tablecell,then muitablecell: { borderbottom: "none" }

this works me fine to remove the borderbottom line of a tablecell.

score:1

to remove the table border lines:

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

score:2

to remove the border from a specific tablerow you can use:

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

score:3

to remove the border lines of the particular table cell use :

<tablecell style={{borderbottom:"none"}}></tablecell>

score:6

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

edit 57325232/how-to-remove-lines-between-cells-in-table-in-material-ui


Related Query

More Query from same tag