VandanShah Ответов: 1

Проблема непрозрачности в структуре заголовка липкой таблицы

Я создал скрипку для справки :- ИГРАТЬ НА СКРИПКЕ В этом случае у меня есть структура таблицы, и я хочу вставить заголовок таблицы в верхнюю часть страницы, поэтому для этого я использовал translateY (), вы можете проверить его на скрипке. Теперь в первом столбце есть флажок с непрозрачностью: 0.3.

Теперь, когда я прокручиваю таблицу и любой флажок tbody перекрывается с флажком thead, я не могу проверить флажок thead.

Я также создал видео этой проблемы :- ВИДЕО если непрозрачность меньше единицы, а затем если вы попытаетесь перекрывать флажки, то флажок thead не будет установлен. Если я использую непрозрачность:1, он работает нормально. Даже если я даю z-индекс флажку заголовка, он не работает. Примечание:- Я не могу удалить или изменить непрозрачность входного сигнала

Что я уже пробовал:

Скрипка

1 Ответов

Рейтинг:
11

Member 12656556

Я вижу твой код в скрипке
Я чувствую, что проблема заключается в преобразовании, поэтому просто удаляю скрипт и добавляю css для достижения этой цели 

#table_header{
  z-index:1;
}
#table_header input{
  opacity:1;
}
#table_header {
  position:fixed;
  top:0;
}
#table_header td{
  margin-bottom:15px;
}
tbody tr:first-child td {
    padding-top: 17px;
}

Здесь я использую position fixed для заголовка вместо transform и использовал z-индекс для проблем перекрытия.Попробуйте этот код, он будет полезен.Спасибо.

VandanShah

Если есть горизонтальная прокрутка, то она не будет прокручиваться горизонтально.
Смотрите скрипку :- https://jsfiddle.net/orbs4g07/9/
вы можете видеть, что там я дал ширину 10000px, но из-за фиксированной позиции она не увеличивается больше этого... Я хочу поставить одинаковую ширину ячеек thead и tbody, но не могу этого сделать с помощью этого... Есть ли какое-то решение для этого?

Member 12656556

Привет
Я найду решение для этого-https://jsfiddle.net/orbs4g07/5/ .Просто добавьте эти две строки в css.Opacity проблема будет решена.

#заголовок таблицы {
z-индекс:2;
}
#ввод table_header {
непрозрачность:1;
}