小编S.Y*_*S.Y的帖子

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

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

问题演示： 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> …