Блог

Я создаю прокручиваемую таблицу с фиксированным заголовком таблицы и флажками. Таблица работала нормально (без перекрытия заголовка и тела таблицы) без флажка. С помощью флажков все строки прокручиваются просто отлично, за исключением того, что флажок в теле таблицы будет перекрываться с флажком (или отображаться) в заголовке таблицы.

Я пытался установить белый фон, но не сработает.

Демонстрационная версия проблемы: 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>
  

Я ожидаю, что флажки не будут перекрываться.

У меня недостаточно баллов для комментариев, но ответ заключается в том, чтобы установить z-index: 1 для заголовка, содержащего флажок.