Липкий заголовок стола на Bootstrap отзывчивом столе - PullRequest
Новая
       6

Липкий заголовок стола на Bootstrap отзывчивом столе

1 голос
/ 08 апреля 2020

Я пытаюсь создать липкий заголовок таблицы. Используя этот код CSS, он отлично работает на стандартной таблице (он будет оставаться липким до самого конца таблицы. 

th {
  background: white;
  position: sticky;
  top: 0;
}

Однако мне нужно, чтобы таблица реагировала на мобильные устройства (возможность для прокрутки вправо.) К сожалению, он больше не работает, когда я добавляю bootstrap таблично-отзывчивый класс (см. мой https://jsfiddle.net/b8x16eht/)

Как я могу заставить его работать на как для мобильных, так и для настольных компьютеров (без установки фиксированной высоты)

РЕДАКТИРОВАТЬ: Спасибо @UfguFugullu за указание на еще одно возможное решение, которое является улучшением. Оно хорошо работает для настольных компьютеров, но все равно не работает в адаптивном режиме (при просмотре из меньшего окна) Обновленная скрипка здесь: https://jsfiddle.net/aqfjozrm/

.table-sticky th {
  background: #fff;
  position: sticky;
  top: -1px;
  z-index: 990;
}

Мне удалось найти веб-сайт, который позволил ему работать с адаптивными таблицами, а также с полной шириной, хотя и я не использую bootstrap https://www.timeanddate.com/weather/new-zealand/auckland/hourly

Я начинаю думать, что нам нужно добавить слушателя javascript для смещения позиции thead от тела, а затем u pdate стиль верхней части thead. Любые js гуру здесь:)?

...