Reactjs中表格组件的行间距

Question

我正在尝试在表格组件的每一行之间创建空间。我在 TableRow、TableCell、TableBody 和 Table 上使用了类名和类属性，但没有任何效果。我也尝试创建自定义主题，但它也不起作用。这是代码，

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

请让我知道我做错了什么？我怎样才能实现它？

Answer 1

您可以在表格样式内使用 border-collapse 和 border-spacing 。就这样。

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

要了解更多信息，请参阅：无法在既没有 CSS 也没有 cellspacing 属性的 <td> 标签上放置边距