在 Material ui Tables 中为整个边框绘制左边框

Question

我正在尝试处理一个表头中应该有 2 行的表。第一个标题中的每个单元格都应该在第二行（在 header 中）有子单元格。到目前为止，我的设计并未清楚地显示每列的数据。我需要为每列绘制左边框。我不知道该怎么做。

这是我的代码（CodeSandBox）

const useStyles = makeStyles({
  table: {
    minWidth: 650
  }
});

<TableContainer component={Paper}>
  <Table className={classes.table} aria-label="simple table">
    <TableHead>
      <TableRow>
        <TableCell align="center" colSpan={5}>
          MRF
        </TableCell>
        <TableCell align="center" colSpan={1}>
          AD
        </TableCell>
        {/* <TableCell align="center" colSpan={4}>Incinerator</TableCell>
        <TableCell align="center" colSpan={4}>Landfill</TableCell>
        <TableCell align="center" colSpan={4}>Market</TableCell> */}
      </TableRow>
      <TableRow>
        <TableCell>Paper</TableCell>
        <TableCell align="right">Plastic</TableCell>
        <TableCell align="right">Glass</TableCell>
        <TableCell align="right">Metals</TableCell>
        <TableCell align="right">Metals</TableCell>
        <TableCell align="right">Food</TableCell>
      </TableRow>
    </TableHead>
    <TableBody>
      <TableRow>
        <TableCell colSpan={2}>Data Two Columns</TableCell>
      </TableRow>
    </TableBody>
  </Table>
</TableContainer>

预期结果：结果

Answer 1

如果您在开发工具中检查表格，您将看到这是表格中使用的边框：1px solid rgba(224, 224, 224, 1)。因此，只需将其添加到您的样式中作为单元格的左边框即可

const useStyles = makeStyles({
  table: {
    minWidth: 650,
    "& .MuiTableCell-root": {
      borderLeft: "1px solid rgba(224, 224, 224, 1)"
    }
  }
});

关于对齐，请保持一致align="center"