我是材料 UI 的新手，我正在努力在表格標題中添加列，我提供了一個我正在嘗試這樣做的影像，在經濟學下將有 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 就像下面的截圖一樣，它太大而且沒有對齊
我已經使用了scope="col"StyledTableCell 中的屬性，但它不起作用，有什么我遺漏的嗎？
謝謝你。
uj5u.com熱心網友回復：
嘗試添加此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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/490619.html