Source:  Twitter logo

I'm trying to create space between each rows of table component. I used classname and classes props on TableRow, TableCell, TableBody and Table, but nothing worked. I also tried to create custom theme but it also not working. Here's the code,

const useStyles = makeStyles({
  table: {
    minWidth: 650
  },
  tableRow: {
    cursor: "pointer",
    borderLeft: "8px solid #9a031e",
    marginTop: "8px"
  },
  tableCell: {
    marginTop: "8px"
  }
});

function createData(name, calories, fat, carbs, protein) {
  return { name, calories, fat, carbs, protein };
}

const rows = [
  createData("Frozen yoghurt", 159, 6.0, 24, 4.0),
  createData("Ice cream sandwich", 237, 9.0, 37, 4.3),
  createData("Eclair", 262, 16.0, 24, 6.0),
  createData("Cupcake", 305, 3.7, 67, 4.3),
  createData("Gingerbread", 356, 16.0, 49, 3.9)
];

export default function BasicTable() {
  const classes = useStyles();

  return (
    <TableContainer component={Paper}>
      <Table className={classes.table} aria-label="simple table">
        <TableHead>
          <TableRow>
            <TableCell>Dessert (100g serving)</TableCell>
            <TableCell align="right">Calories</TableCell>
            <TableCell align="right">Fat&nbsp;(g)</TableCell>
            <TableCell align="right">Carbs&nbsp;(g)</TableCell>
            <TableCell align="right">Protein&nbsp;(g)</TableCell>
          </TableRow>
        </TableHead>
        <TableBody component={Paper}>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              className={classes.tableRow}
              styles={{ marginTop: 8 }}
            >
              <TableCell component="th" scope="row" style={{ width: 100 }}>
                {row.name}
              </TableCell>
              <TableCell align="right">{row.calories}</TableCell>
              <TableCell align="right">{row.fat}</TableCell>
              <TableCell align="right">{row.carbs}</TableCell>
              <TableCell align="right">{row.protein}</TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

Please do let me what am I doing wrong? How can I achieve it?

You can use border-collapse and border-spacing just inside table style. Thats all.

table: {
    minWidth: 650,
    borderCollapse: 'separate',
    borderSpacing: '0px 4px'
}

To know more see: Cannot put margin on <td> tag with neither CSS nor cellspacing attribute

5 users liked answer #0dislike answer #05
Tuhin profile pic
Tuhin

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).