在材质ui表中为整个边框绘制一个左边框 [英] Drawing a left Border for the whole border in material ui Tables

问题描述

我正在尝试处理一个表，该表头中应该有2行.第一个标头中的每个单元格在第二行(标头中)应有子级.到目前为止，我的设计并未清楚显示每列的数据.我需要为每列绘制一个左边框.我不确定该怎么做.

这是我的

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

解决方案

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"

这篇关于在材质ui表中为整个边框绘制一个左边框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！