Material-UI 表格行高到固定高度，即使 ReactJS 中的内容很长答案

【问题标题】：Material-UI table Row height to fixed height even content is lengthy in ReactJSMaterial-UI 表格行高到固定高度，即使 ReactJS 中的内容很长
【发布时间】：2021-04-06 18:59:23
【问题描述】：

我正在使用列表组件，并且正在 ReactJS 中使用材质 UI 表。我在表中有一个 ResumeUrl 字段，该字段跨越 3、4 行，但我只想将其保留在 2 行（整行的固定高度）并显示其余内容的点。我无法更改行的高度。我尝试过不同的方法。 This solution 也不适合我。

如果内容越来越长，它将继续增加高度。我想设置它的固定高度，以获得更好的外观和良好的用户体验。

    <TableContainer>
      <Table
        className={classes.table}
        aria-labelledby="tableTitle"
        size={dense ? 'small' : 'medium'}
        aria-label="enhanced table"
        data={applicants}
      >
        <EnhancedTableHead
          classes={classes}
          order={order}
          orderBy={orderBy}
          onRequestSort={handleRequestSort}
          rowCount={rows.length}
        />
          <TableBody>
          {stableSort(rows, getComparator(order, orderBy))
            .slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage)
            .map((row, index) => {
              const labelId = `enhanced-table-checkbox-${index}`;
              return (
                <TableRow
                  style={{height: 10}}
                  hover
                  role="checkbox"
                  tabIndex={-1}
                  key={row._id}
                >
                  <TableCell style={{ height: 'auto !important' }} component="th" id={labelId} scope="row">{row.name}</TableCell>
                  <TableCell style={{ height: 'auto !important' }} align="left">{row.address}</TableCell>
                  <TableCell style={{ height: 'auto !important' }} align="left">{row.phone}</TableCell>
                  <TableCell style={{ height: 'auto !important' }} align="left" style={{width: 350}}><a href={row.resumeUrl}
                                                                  target={'_blank'}>{row.resumeUrl}</a></TableCell>
                  <TableCell style={{ height: 'auto !important' }} align="left">{row.email}</TableCell>
                  <TableCell style={{ height: 'auto !important' }} align="left">{row.applied_date}</TableCell>
                </TableRow>
              );
            })}


          {emptyRows > 0 && (
            <TableRow
            style={{height: (dense ? 33 : 53) * emptyRows}}
            >
            <TableCell colSpan={6}/>
            </TableRow>
            )}
              </TableBody>
            </Table>
          </TableContainer>

【问题讨论】：

请添加最少的工作代码..
@XxSTREKxX 感谢您的关注，实际上我已经在答案部分给出了答案。我是在玩过css之后做到的。

标签： css reactjs material-ui

【解决方案1】：

经过深思熟虑，我能够自己做到这一点。如果有人有兴趣，他可以抓住它。

我用ellipsisStyle 名称声明了一个样式变量。

const ellipsisStyle = {
    whiteSpace: 'nowrap',
    textOverflow: 'ellipsis',
    overflow: 'hidden',
    width: '350px',
    maxWidth: '350px' }

然后，您可以在要应用样式的所有TableCell 中使用此样式。

               <TableRow> <TableCell component="th" id={labelId} scope="row">{row.name}</TableCell>
                  <TableCell align="left" style={ellipsisStyle}>{row.address}</TableCell>
                  <TableCell align="left" style={ellipsisStyle}><a href={row.resumeUrl} target={'_blank'}>{row.resumeUrl}</a></TableCell>
               </TableRow>

【讨论】：