设置 Material UI 动态响应 TableCell 宽度答案

【问题标题】：Set Material UI react TableCell width dynamically设置 Material UI 动态响应 TableCell 宽度
【发布时间】：2018-09-12 14:23:34
【问题描述】：

如何在 Material UI react 中设置 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>
)

所有列的宽度相同。我想动态地获得宽度。我该怎么做？

【问题讨论】：

发现这有帮助：smartdevpreneur.com/customizing-material-ui-table-cell-width

标签： reactjs material-ui

【解决方案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>

【讨论】：

【解决方案2】：

有一个 Github 线程 here 他们谈论这个。如果您查看底部的最后一条评论，则有一个制作表格的代码示例，您可以在其中使用类为某些单元格分配宽度，其余的跨度相等。因此，我假设您可以根据需要为所有内容分配百分比，并且评论说百分比与固定像素量一样有效。

【讨论】：

非常感谢。只要我从 TableHead 中的最后一个删除colspan={2}，这个解决方案就可以工作。如果我再次添加colspan={2}，所有列将再次具有相同的宽度。

【解决方案3】：

将width 设置为每个TableCell，如下所示：

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

【讨论】：

【解决方案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>

【讨论】：