Задание пользовательского интерфейса материала динамически реагирует на ширину таблицы. - PullRequest
Новая
       5

Задание пользовательского интерфейса материала динамически реагирует на ширину таблицы.

0 голосов
/ 12 сентября 2018

Как настроить ширину 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>
)

Все столбцы имеют одинаковую ширину. Я хотел бы иметь ширину динамически. Как я могу это сделать?

1 Ответ

0 голосов
/ 12 сентября 2018

Здесь есть тема Github здесь , где они говорят об этом.Если вы посмотрите на последний комментарий внизу, то есть пример кода для создания таблицы, в которой вы назначаете ширину определенным ячейкам, используя класс, а остальные - одинаково.Поэтому я предполагаю, что вы можете назначать проценты всем, как хотите, а в комментарии говорится, что проценты работают так же, как и фиксированные пиксельные суммы.

...