Почему не работает sticky на мобильных устройствах? | Table

Рейтинг: 0Ответов: 1Опубликовано: 24.08.2023

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

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);
}
<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>
    <tbody>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
        <tr><td>Test</td><td>Test</td><td>Test</td></tr>
    </tbody>
  </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);
    }
}

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

css html вёрстка табличная-верстка sticky
Источник: Stack Overflow на русском

Ответы

▲ 0Принят

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

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

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