Question

我正在渲染这样的行

`<TableRow
  key={row.name}
>
  <TableCell>{row.empId}</TableCell>
  <TableCell>{row.userId}</TableCell>
  <TableCell>{row.name}</TableCell>
  <TableCell>{row.hireDate}</TableCell>
  <TableCell>{row.terDate}</TableCell>
  <TableCell>{row.empType}</TableCell>
  <TableCell>
    <Typography variant="button" color={row.empStatus ? 'primary' : 'error'}>
      {row.empStatus ? 'Active' : 'Inactive'}
    </Typography>{' '}
  </TableCell>
  <TableCell align="right">
    <IconButton aria-label="view log" onClick={() => setOpen(true)}>
      <HistoryIcon fontSize="small" />
    </IconButton>
    <IconButton aria-label="edit">
      <EditIcon fontSize="small" />
    </IconButton>
  </TableCell>
  <div className="overley">
    <p>overlay text</p>
  </div>
</TableRow>`

并且覆盖层具有类似CSS的

`.overley {
    position: absolute;
    background-color: gainsboro;
    opacity: 0.5;
    width: 100%;
  }
  .tableRow {
    position: relative;
  }`

我期望这样的事情 table

那么如何在不影响表格或行的宽度和对齐方式的情况下增加覆盖效果或在行上显示的任何div。

上面的代码在末尾再增加一列，如果我给left：0，它将移到屏幕的左侧。有谁知道如何做到这一点？

Answer 1

我一直希望做到这一点，并且能够通过以下操作来做到这一点：

<TableRow className={'row-overlay-hover'}>
    <TableCell/>
    ...
    <TableCell/>
    <TableCell>
        <div className={'overlay-wrapper'}>
            <div className={'overlay-content'}>
                Overlay content
            </div>
        </div>
    </TableCell>
</TableRow>

.row-overlay-hover td:last-child {
    width: 0;
    padding: 0 !important;
}
.row-overlay-hover:hover .overlay-content {
    visibility: visible;
}
.overlay-wrapper {
    position: relative;
}
.overlay-content {
    visibility: hidden;
    position: absolute;
    right: 0;
}

注意：

我引用了此Overlay table cells with two buttons on hover，并在答复中指出，并非所有浏览器都在表单元格上支持position: relative（尽管它来自2012年），所以我选择将叠加层包装为宽度为零的div表格末尾的列

如何将叠加层添加到材料UI表行？

1 个答案: