Drawing a left Border for the whole border in material ui Tables

问题

I am trying to handle a table where I should have 2 rows in the header. Each cell in the first header should have children's in the second row (in the header ). My design so far doesn't clearly display the data for each column. I need to draw a left border for each column. I am not sure how to do so.

Here is my code (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>

Expected Results: result

回答1:

If you inspect the table in dev tools, you will see that this is the border that is used in the table: 1px solid rgba(224, 224, 224, 1). So just add that on your styles as the left border for the cells

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

Regarding the alignment, keep consistent with align="center"

来源：https://stackoverflow.com/questions/64289613/drawing-a-left-border-for-the-whole-border-in-material-ui-tables

标签

reactjs

material-ui