CODEWITHSUNDEEP
cssreactjsmaterial-ui
Prateek Pareek
Prateek Pareek

Reputation: 170

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

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

Upvotes: 2

Views: 2008

Answers (1)

NearHuscarl
NearHuscarl

Reputation: 81330

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

Upvotes: 3

Related Questions