Question

如何在Material UI中设置TableCell的宽度？我试过了，但是没用：

return(
    <Paper className={classes.root}>
        <Table className={classes.table}>
            <TableHead>
                <TableRow>
                    <TableCell style={{width: '30%'}}>Vorname</TableCell>
                    <TableCell style={{width: '20%'}}>Nachname</TableCell>
                    <TableCell style={{width: '20%'}}>Soc. Vers. Nr.</TableCell>
                    <TableCell style={{width: '20%'}}>Geburtsdatum</TableCell>
                    <TableCell style={{width: '10%'}} colSpan={2}>Aktionen</TableCell>
                </TableRow>
            </TableHead>
            <TableBody>
                {delegates.map((delegateItem) => {
                    return(
                        <TableRow key={delegateItem.userData.id}>
                            <TableCell style={{width: '30%'}}>{delegateItem.userData.firstName}</TableCell>
                            <TableCell style={{width: '20%'}}>{delegateItem.userData.lastName}</TableCell>
                            <TableCell style={{width: '20%'}}>{delegateItem.userData.socSecNr}</TableCell>
                            <TableCell style={{width: '20%'}}>{delegateItem.userData.birthDateStr}</TableCell>
                            <TableCell style={{width: '5%'}}>
                                <Link to={`/delegateperms/${delegateItem.userData.id}`}>
                                    <SettingsIcon/>
                                </Link>
                            </TableCell>
                            <TableCell style={{width: '5%'}}>
                                <Link to={`/delegatedelete/:${delegateItem.userData.id}`}>
                                    <DeleteForeverIcon/>
                            </Link>
                        </TableCell>
                        </TableRow>
                    )
                })}
            </TableBody>
        </Table>
    </Paper>
)

所有列都具有相同的宽度。我想动态地设置宽度。我该怎么做？

Answer 1

这对我来说适用于版本"@material-ui/core": "4.9.0"

<TableContainer className={classes.container}>
          <Table className={classes.table} stickyHeader size="small">
            <TableHead>
              <TableRow>
                <TableCell width="30%">User Name</TableCell>
                <TableCell width="20%">Designation</TableCell>
                <TableCell width="10%">Nid</TableCell>
                <TableCell width="20%">Email</TableCell>
                <TableCell width="10%">Mobile</TableCell>
                <TableCell width="10%">Gender</TableCell>
              </TableRow>
            </TableHead>
            <TableBody>
              {props.isGridLoading && (
                <TableRow>
                  <TableCell colSpan={6}>
                    <LoadingGridSpinner open={props.isGridLoading} />
                  </TableCell>
                </TableRow>
              )}

              {props.profileObj.lists &&
                props.profileObj.lists.map(row => (
                  <TableRow key={row.userProfileId} hover={true}>
                    <TableCell width="30%">
                      {row.userName}
                    </TableCell>
                    <TableCell width="20%">{row.designation}</TableCell>
                    <TableCell width="10%">{row.nid}</TableCell>
                    <TableCell width="20%">{row.email}</TableCell>
                    <TableCell width="10%">{row.mobile}</TableCell>
                    <TableCell width="10%">{row.gender}</TableCell>
                  </TableRow>
                ))}
            </TableBody>
          </Table>

Answer 2

有一个Github线程here在这里谈论。如果您看一下底部的最后一条注释，则有一个制作表格的代码示例，您可以在其中使用类将某些单元格的宽度分配给其他单元格，其余单元段的宽度相等。因此，我假设您可以为所有想要的人分配百分比，并且注释中说百分比和固定像素数量一样有效。

Answer 3

你怎么说：

<TableCell style={{width: '20%'}}>Geburtsdatum</TableCell>

Answer 4

这与"@material-ui/core": "4.8.3"对我有用：

<Table style={{ width: "auto", tableLayout: "auto" }}>
<TableBody>
 <TableRow>
   <TableCell component="th" scope="row" width={150}>lorem 1</TableCell>
  <TableCell component="th" scope="row" width={100}>lorem 2</TableCell>
  <TableCell component="th" scope="row">lorem 3</TableCell>
 </TableRow>
</TableBody>
</Table>

设置Material UI动态响应TableCell宽度

4 个答案: