@WindowsExpert
No found

Как зафиксировать размер таблицы в React?

Доброго времени суток. Столкнулся с такой проблемой в реализации frontend части моего приложения. Требуется зафиксировать размер таблицы, чтобы она полностью помещалась. Написано на React с ипользованием библиотеки Material Ui. Заранее извиняюсь за говнокод.

5ec39e69dd762453411199.png

render(){

    return (
        <Container>
          <LinkMaterial component="button" variant="h5" color="textPrimary" onClick={this.handleClickOpen}>
            История оценок
          </LinkMaterial>
          <Dialog open={this.state.open} onClose={this.handleClose}  aria-labelledby="form-dialog-title">
            <DialogTitle id="form-dialog-title">Показан список новых оценок</DialogTitle>
            <DialogContent fullWidth="true">
              <DialogContentText>
                
              </DialogContentText>
    
    <TableContainer component={Paper}>
          <Table className={this.useStyles.table} aria-label="simple table" style={tableStyle}>
            <TableHead>
              <TableRow>
                <TableCell align="center">Оценка</TableCell>
                <TableCell align="center">Преподаватель</TableCell>
                <TableCell align="center">Предмет</TableCell>
                <TableCell align="center">НБ?</TableCell>
                <TableCell align="center">Время</TableCell>
                <TableCell align="center">Дата</TableCell>

              </TableRow>
            </TableHead>
            <TableBody>
              {this.state.object.map(object => (
                <TableRow key={object.id}>
                  <TableCell component="th" scope="row">
                    {object.value}
                  </TableCell>
                  <TableCell align="left">{object.teacher}</TableCell>
                  <TableCell align="left">{object.subject}</TableCell>
                  <TableCell align="left">{object.absent}</TableCell>
                  <TableCell align="left">{object.time}</TableCell>
                  <TableCell align="left">{object.date}</TableCell>

                </TableRow>
              ))}
            </TableBody>
          </Table>
        </TableContainer>
    
    
            </DialogContent>
            <DialogActions>
              <Button onClick={this.handleClose} color="primary">
                Закрыть
              </Button>
            </DialogActions>
          </Dialog>
        </Container>
      );


  
}
  • Вопрос задан
  • 105 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы