How to give space between two Table Rows In Material-UI Table Row

user_11403139 0
Viewed 396
const useRowStyles = makeStyles({
  root: ({ open }) => ({
    backgroundColor: open ? "#F5F6FF" : "white",
    backgroundOrigin: "border-box",
    spacing: 8,
    "& > *": {
      height: "64px",
      borderSpacing: "10px 10px ",
      borderCollapse: "separate",
    },
  }),
});
<TableRow className={classes.root}>
     cell content will comes here
<TableRow>

this is the CSS I am using with TableRow Material-UI but it is not working

Can anybody tell me how I can add space between rows in Material-UI TableRows

I have found many similar question but they are not working in my case

here I have recreated this issue https://codesandbox.io/s/winter-leftpad-7jnhv?file=/src/App.js

material-ui reactjs css
1 Answers

You need to put your TableRow inside Table component and in your TableRow container, add the following styles, it will set the border bottom in every row except the last one:

const useRowStyles = makeStyles({
  tableBody: {
    "& > :not(:last-child)": {
      borderBottom: "25px solid red"
    }
  }
});

<TableBody className={classes.tableBody}>
  <TableRow>
    {...}
  </TableRow>
  <TableRow>
    {...}
  </TableRow>
</TableBody>

Live Demo

Codesandbox Demo

user_94494260
Related