React - Пользовательский интерфейс материала: Как удалить полосу прокрутки из таблицы

Question

Я построил простую таблицу с пользовательским интерфейсом реагирования и материала с этими инструкциями: https://material-ui.com/components/tables/#table.

Он работает нормально, но полоса прокрутки меня беспокоит.

Есть ли возможность, чтобы полоса прокрутки начиналась с красной стрелки? Или полностью удалить?

Заранее спасибо

код

    <TableContainer component={Paper} style={{maxHeight: 350}}>
    <Table className={styles.table} size="small" stickyHeader>
      <TableHead>
        <TableRow >
          <TableCell className={styles.header}>
            <Checkbox checked={allSelected} onClick={handleSelectAll} color="primary"/>
          </TableCell>
          <TableCell className={styles.header} align="left">Name</TableCell>
          {props.showAdmin && <TableCell className={styles.header}>Admin</TableCell>}
        </TableRow>
      </TableHead>
      <TableBody>
        {props.employees.map(empl => (
          <TableRow key={empl.id}>
            <TableCell>
              <Checkbox checked={isSelected(empl.id)} onClick={() =>handleSelect(empl.id)} className={styles.checkBox} color="primary"/>
            </TableCell>
            <TableCell component="th" scope="row" style={{paddingRight: 30}}>{empl.name}</TableCell>
            {props.showAdmin && <TableCell align="center"><Checkbox disabled checked={empl.isAdmin} className={styles.checkBox}/></TableCell>}
          </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>

стиль

createStyles({
  table: {
   maxWidth: 350,
   maxHeight: 300
  },
  header: {
   backgroundColor: '#123456',
   color: '#ffffff',
   fontSize: 18
 },
 checkBox: {
   paddingTop: 1,
   paddingBottom: 1,
 }
}),
);

Answer 1

Если вы удалите стиль maxHeight для TableContainer, прокрутка исчезнет.

<TableContainer component={Paper} style={{ maxHeight: 350 }}>

до

<TableContainer component={Paper}>

---

Обновление

Если вы хотите прокрутить заголовок снизу, просто добавьте связанный CSS к компоненту Material-UI Table, и TableBody будет в порядке.

table: {
  display: "block",
  maxWidth: 350,
},
body: {
  display: "block",
  overflow: "auto",
  height: "300px"
},

См .:

• свиток с указанием высоты тела с переполнением

• как полностью заполнить -a-table-100-with-tbody-in- html

Попробуйте онлайн:

---