Сделайте левый столбец таблицы липким, используя компоненты в стиле React. ⇐ CSS

[Anonymous]

Используя стилизованные компоненты, я создал следующие стилизованные элементы. Моя цель — сделать первую строку и столбец «прикрепленными», чтобы, когда пользователь прокручивает таблицу, они всегда оставались в фиксированном положении. Структура таблицы имеет следующий тип:

Код: Выделить всё

Код: Выделить всё

const WrapperDiv = styled.div`
overflow: scroll;
border: 1px solid var(--color-grey-100);
background-color: var(--color-grey-0);
border-radius: 2rem;
`;

const StyledTable = styled.table`
font-size: 1.4rem;
overflow: hidden;
background-color: var(--color-grey-0);
`;

const StyledRow = styled.tr`
border-top: 1px solid var(--color-grey-200);
border-bottom: 1px solid var(--color-grey-200);
background-color: inherit;
transition: all 0.3s;
&:last-child {
border-bottom: none;
}
&:nth-child(odd) {
background-color: var(--color-grey-100);
}
`;

const StyledHeaderRow = styled.tr`
border-top: 1px solid var(--color-grey-200);
border-bottom: 1px solid var(--color-grey-200);
background-color: inherit;
&:first-child {
border-top: none;
}
&:last-child {
border-bottom: 2px solid var(--color-grey-200);
}
&:hover {
background-color: var(--color-grey-200);
}
`;

const StyledTd = styled.td`
white-space: nowrap;
background-color: inherit;
&:first-child {
position: sticky;
}
`;

const StyledTh = styled.th`
white-space: nowrap;
background-color: inherit;
&:first-child {
position: sticky;
}
`;

const StyledCell = styled.div`
margin-top: 2rem;
margin-bottom: 2rem;
margin-right: 1rem;
margin-left: 1rem;
text-align: center;
`;

Я был бы очень признателен за любую помощь!
Для достижения вышеуказанной цели я пытаюсь установить положение первого дочернего элемента типа и прикрепить его , однако ничего не меняется, и таблица прокручивается как обычно. Кроме того, я попробовал абсолютное позиционирование, но это создало новый набор проблем, поэтому я бы хотел этого избежать.

Подробнее здесь: https://stackoverflow.com/questions/786 ... components