TableRow Material-UI之间的间距

Question

我想在TableRow MaterialUI组件之间添加空白。我该如何实现？

<S.MainTable>
  <TableBody>
   {rows.map(row => {
     return (
       <S.StyledTableRow key={row.id}>
         <TableCell component="th" scope="row">{row.name}</TableCell>
         <TableCell numeric>{row.calories}</TableCell>
         <TableCell numeric>{row.fat}</TableCell>
         <TableCell numeric>{row.carbs}</TableCell>
         <TableCell numeric>{row.protein}</TableCell>
       </S.StyledTableRow>
           );
         })}
  </TableBody>
</S.MainTable>

- Евгений Карпович

Answer 1

请在您的表格CSS中添加以下几行代码：

{
     border-spacing: 0 5px !important;
     border-collapse: separate !important;
}

- bahar

Answer 2

你可以通过在表格中定义paddingBottom和paddingTop来添加行之间的空白，就像这样：

<TableCell style={{ paddingBottom: 10, paddingTop: 10 }} colSpan={2}>
           <Collapse in={open} timeout="auto" unmountOnExit>
               <Box margin={1}>
                   <Typography variant="h6" gutterBottom component="div">
                       ENGAGEMENT HISTORY
           </Typography>
                   <Table size="small" aria-label="purchases">
                       <TableHead>
                           <TableRow>
                               <TableCell>Date</TableCell>
                               <TableCell>Club</TableCell>
                               <TableCell align="right">Staff</TableCell>
                           </TableRow>
                       </TableHead>
                       <TableBody>
                           {row.engagementHistory.map((historyRow) => (
                               <TableRow key={historyRow.date}>
                                   <TableCell component="th" scope="row">
                                       {historyRow.date}
                                   </TableCell>
                                   <TableCell>{historyRow.contact}</TableCell>
                                   <TableCell align="right">{historyRow.staff}</TableCell>
                               </TableRow>
                           ))}
                       </TableBody>
                   </Table>
               </Box>
           </Collapse>
       </TableCell>

- Ali Raza

---

你能添加一个沙盒吗？现在似乎不能正常工作！ - talha_ah

可以，你还在寻找那个问题的答案吗？如果是的话，我可以为你解答。 - Ali Raza

你能提供正确的答案吗？我正在寻找相同的答案。 - Prateek Pareek

Answer 3

你用了“break”标签吗？或者你也可以用边距和填充来实现。

- Faisal Khan

---

请详细说明您的答案，并展示一个示例或代码。 - gil