angularjs 如何在React Material UI中在表格标题中添加行和列

wbgh16ku 于 2023-06-04 发布在 Angular

关注(0)|答案(1)|浏览(242)

我是新的材料用户界面，我正在努力在表格标题中添加列，我提供了一个图像，我试图这样做，在经济学下将有3列，每列将需要两列。

下面是我的代码：

<Table sx={{ minWidth: 700 }} aria-label="customized table">
          <TableHead>
            <TableRow>
           <StyledTableCell align="left" scope="col">
                Economics
                <StyledTableCell align="left" scope="col">
                  1st
                  <StyledTableCell align="left">CQ</StyledTableCell>
                  <StyledTableCell align="left">MCQ</StyledTableCell>
                </StyledTableCell>
                <StyledTableCell align="left">
                  2nd
                  <StyledTableCell align="left">CQ</StyledTableCell>
                  <StyledTableCell align="left">MCQ</StyledTableCell>
                </StyledTableCell>
                <StyledTableCell align="left">
                  AVG
                  <StyledTableCell align="left">%</StyledTableCell>
                  <StyledTableCell align="left">GP</StyledTableCell>
                </StyledTableCell>
              </StyledTableCell>
            </TableRow>
          </TableHead>

上面的代码UI就像下面的截图一样，太大了，而且没有对齐

我在StyledTableCell中使用了scope="col"属性，但它不起作用，是否缺少了什么？
谢谢你。

angularjs

来源：https://stackoverflow.com/questions/72553610/how-can-i-add-row-and-columns-in-table-heading-in-react-material-ui

1条答案

按热度按时间

lokaqttq1#

尝试添加此colSpan属性
<StyledTableCell colSpan={6}>
你可以在这里查一下。在跨越截面https://mui.com/material-ui/react-table/中
您的代码将如下所示

<Table stickyHeader aria-label="sticky table">
    <TableHead>
      <TableRow>
        <TableCell align="center" colSpan={6}>
          Economics
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell align="center" colSpan={2}>
          1st
        </TableCell>
        <TableCell align="center" colSpan={2}>
          2nd
        </TableCell>
        <TableCell align="center" colSpan={2}>
          AVG
        </TableCell>
      </TableRow>
      <TableRow>
        <TableCell align="center">CQ</TableCell>
        <TableCell align="center">MCQ</TableCell>
        <TableCell align="center">CQ</TableCell>
        <TableCell align="center">MCQ</TableCell>
        <TableCell align="center">%</TableCell>
        <TableCell align="center">GP</TableCell>
      </TableRow>
    </TableHead>
  </Table>

赞(0）回复(0）举报 2023-06-04

我来回答

angularjs 如何在React Material UI中在表格标题中添加行和列

1条答案

相关问题

热门标签

最新问答