Почему на мобильной версии не работает sticky для table?

Question

[Famper Wasteland]

У меня используются такие стили, чтобы сделать th в качестве sticky для многих устройств. Но работает только на ПК.

CSS:

th {
    background: white;
    position: sticky;
    top: 0; /* Don't forget this, required for the stickiness */
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}

HTML:

<div class="main">
    <table id="summary-city" class="table table-striped table-bordered table-thead-sticky">
        <thead class="report-thead" id="header">
            <tr>
                <th style="text-align: center !important; vertical-align: middle !important; width: 12.5%;">Шапка 1</th>
                <th style="text-align: center !important; vertical-align: middle !important; width: 12.5%;">Шапка 2</th>
                <th style="text-align: center !important; vertical-align: middle !important; width: 12.5%;">Шапка 3</th>
                ...
            </tr>
        </thead>
        ...
    </table>
</div>

Вся проблема с том, что на ПК все отлично. Sticky работает для th, а вот на мобильных устройствах не работает. Попытался сделать так:

CSS:

@media (max-width: 1300px) {
    th {
        background: white;
        position: sticky;
        top: 0;
        box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
    }
}

Но это безрезультатно...

Comments

[IvanU7n]

ну так оно не применяется при ширине вьюпорта меньше 1300 пикселей (это относительно последнего примера)

[Famper Wasteland]

IvanU7n,

А как сделать так, чтобы для мобилок применялось?

Когда max-width указывается, это значит же, что до 1300px это правило тоже работает. Разве нет?

[IvanU7n]

Famper Wasteland, убрать медиа запрос и нет, медиа запроса-работает при срабатывании условия, а условие (width >= 1300px)

а вот почему не срабатывает без медиа запроса подсказать не могу, слишком мало информации (как минимум классы), проверяйте на минимальном примере и уже потом экстраполируйте

[Ankhena]

IvanU7n,

медиа запроса-работает при срабатывании условия, а условие (width >= 1300px)

В условии @media (max-width: 1300px) написано вообще-то обратное: сработает при ширине меньшей или равной 1300. (Если больше ничем не перебьется).

Famper Wasteland, почему не работает - не ясно. Ваших стилей недостаточно, чтобы это определить. Например, забыли указать высоту или задали overflow не тому элементу или что-то ещё.

[Famper Wasteland]

Ankhena, а не могли бы подсказать рабочий пример, который работает и на мобильных устройствах?

[Ankhena]

Famper Wasteland, было бы логичнее, если бы вы сделали полный пример, который там не работает. Без лишнего кода, но так, чтобы его можно было открыть с мобилки и увидеть сложности.

Answer 1

[Famper Wasteland]

Всем спасибо, нашел проблему. Связана с тем, что для определенных устройств стоит этот стиль:

@media (max-width: 767.98px) {
    .main {
        overflow-y: hidden
    }
}

Это стояло в глобальных стилях.