TableRow Material-UI 之间的间距

Posted 2023-02-22

【中文标题】TableRow Material-UI 之间的间距

【英文标题】：Spacing between TableRow Material-UI

【发布时间】：2019-01-25 08:14:27

【问题描述】：

我想在 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>

【参考方案1】：

你使用过“break”标签吗？或者你也可以使用边距和填充。

【讨论】：

请通过示例或代码详细说明您的答案。

【参考方案2】：

将这几行代码添加到表格的 CSS 中：

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

【参考方案3】：

你可以通过定义 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>

【讨论】：

可以添加沙箱吗？它现在似乎不起作用！

是的，你还在寻找那个问题的答案吗？如果是，那么我会为你做那件事

你能提供正确答案吗？我正在寻找同样的答案