Блог

Главная - Вопросы по программированию - Цвет, не применяемый к первому столбцу в таблице в соответствии с реквизитами

Цвет, не применяемый к первому столбцу в таблице в соответствии с реквизитами

#javascript #html #css #reactjs #typescript

#javascript #HTML #css #reactjs #машинописный текст

Вопрос:

Я пытаюсь раскрасить первый столбец моей строки в соответствии с вычисляемым значением. Если он четный, цвет белый. Если он нечетный, цвет должен быть серым. Таким образом, мы можем создать эффект «чередования зебры». Первый столбец также должен «прилипать» и присутствовать, когда пользователь прокручивает вправо. Столбец по умолчанию окрашен в соответствии со строкой, поэтому сначала цвета выглядят правильно. Однако, когда я прокручиваю, ячейки внезапно становятся прозрачными, например: Un-scrolled: введите описание изображения здесь

после прокрутки:
введите описание изображения здесь

Вот код, в котором я попытался установить цвет каждой ячейки в соответствии со значением props.index:

 export const TDHeader = styled.td<any>`
  text-align: center;
  border: 2px solid ${theme.gray.lightmedium};
  box-shadow: 1px 0px 0px 0px rgba(147, 147, 147, 0.7);
  border-style: ${props => (props.borderTop ? "solid" : "none")} solid
    ${props => (props.borderBottom ? "solid" : "none")}
    ${props => (props.hideLeft ? "none" : "solid")};
  background-color: ${props =>
    props.index % 2 === 0 ? "rgba(242, 242, 242, 1)" : "rgba(147, 147, 147, 1)"}

  ...
  }
`;

И вот пример того, где используется ячейка:

 <Row viewer={viewer} index={level.level   zebraStripOffset}>
              <TDHeader
                index={level.level   zebraStripOffset}
                className="bold"
                rowSpan={2}
                hideLeft={true}
                borderBottom={isLastRow}
              >
                {level.level}
              </TDHeader>
...

Как вы можете видеть, цвет явно не наносится. Я неправильно передаю реквизит или что может происходить?

Комментарии:

1. пожалуйста, укажите минимальный воспроизводимый фрагмент кода. Почему бы просто не использовать nth-child(even) and `nth-child(нечетный) в качестве селектора? Также вы говорите о столбцах, в то время как на рисунках строки окрашены в полосатый цвет зебры.

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

3. Почему вы делаете это с помощью кода? Вы должны использовать свойство :nth-child(even) CSS. Вы слишком много об этом думаете

4. @Laif кто-то другой написал код, чего бы он ни стоил. Я согласен, вся эта таблица, над которой я работаю, немного запутана, но ее исправление выходит за рамки данной проблемы.

5. @JimmyBlundell вы можете просто добавить тег стиля в таблицу, нет?

Метки: