复选框在带有粘性表头的滚动表中重叠

Question

我正在创建一个带有固定表头和复选框的可滚动表。在没有复选框的情况下，表格工作正常（表格头部和主体没有重叠）。使用复选框，所有行都可以很好地滚动，除了表体中的复选框将与表头中的复选框重叠（或显示）。

我尝试将背景设置为白色，但不起作用。

问题演示： https: //codesandbox.io/s/vm6l0p1vly

      <div
        style={{
          height: "500px",
          width: "100%",
          overflow: "auto",
          borderStyle: "solid",
          borderWidth: 1,
          borderColor: "lightGray"
        }}
      >
        <Table>
          <TableHead>
            <TableRow>
              <TableCell
                padding="checkbox"
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                <Checkbox />
              </TableCell>
              <TableCell
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                id
              </TableCell>
              <TableCell
                style={{ position: "sticky", top: 0, backgroundColor: "white" }}
              >
                name
              </TableCell>
            </TableRow>
          </TableHead>
          <TableBody>
            {data.map(row => (
              <TableRow key={row.id} hover>
                <TableCell padding="checkbox">
                  <Checkbox />
                </TableCell>
                <TableCell>{row.id}</TableCell>
                <TableCell>{row.name}</TableCell>
              </TableRow>
            ))}
          </TableBody>
        </Table>
      </div>

我希望复选框不会重叠。

Answer 1

我没有足够的点来评论，但答案是为包含复选框的标题设置 z-index: 1 。