scroll в div - не появляется
Есть сложное web-приложение, в котор-торое я встраиваю небольшой div, содержащий таблицу. То есть, буквально, на странице приложения есть "окошко" (фиксированного размера в процентах от окна браузера, как я понял по внешним признакам), куда мне надо вывести таблицу с переменным числом строк.
И, конечно, я хочу, чтобы при большом количестве строк в div'е возникал вертикальный скроллбар.
я формирую html и css код для этого div'а
div устроен просто, вот весь его код:
<div id='myspan' class='scroll'><h3>Список финтифлюшек</h3>
<table class="topTableClass">
<thead>
<tr>
<th>Дата</th>
<th>Название</th>
<th>ID проблемы</th>
<th>Статус1</th>
<th>→</th>
<th>Статус2</th>
</tr>
</thead>
<tbody> <tr class='trCls'><td>04.09.2024 10:09</td><td>Инфраструктура_ ЦПЛ</td><td>TR000000001023</td><td>Оценка - валидация СН</td><td>→</td><td>Анализ</td>
</tr>
<tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001946</td><td>Недоступность функций из-за исчерпания ресурсов на виртуальном сервере</td><td>→</td><td>Отказ виртуального сервера</td>
</tr>
<tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001947</td><td>Недоступность функций из-за сбоя или некорректной работы подключения к сети Интернет</td><td>→</td><td>Невозможность соединения</td>
</tr>
<tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001948</td><td>Недоступность функций из-за исчерпания ресурсов СУБД</td><td>→</td><td>Невозможность работы с БД</td>
</tr>
</tbody>
</table>
</div>
И кол-во строк в этой таблице - переменное.
С классом scroll, как мне кажется, я тоже сдалал всё правильно, от выглядит так:
.scroll {
overflow: scroll;
overflow-y: scroll;
overflow-x: scroll;
}
А потом происходит следующее: когдя я тестирую свой div - всё работает корректно, сколлбар появляется. А на "настоящей" странице - не появляется.
я очень плохо знаю css, но подозреваю, что в одном из "блоков более высокого уровня" может быть как то "глобально отменён" скролл.
Подскажите, пожалуйста, как можно попробовать бороться с этой проблемой? Спасибо.
PS. я знаю правило насчет минимально воспроизводимого примера, но не могу понять, как из всего веб-приложения "вырезать" пример страницы
Ответы (1 шт):
Вот пример с горизонтальным и вертикальным скролом в блоке div.
div {
height: 150px;
width: 500px;
}
.scroll {
overflow-x: auto;
white-space: nowrap;
scrollbar-width: thin;
scrollbar-color: grey;
}
<div id='myspan' class='scroll'><h3>Список финтифлюшек</h3>
<table class="topTableClass">
<thead>
<tr>
<th>Дата</th>
<th>Название</th>
<th>ID проблемы</th>
<th>Статус1</th>
<th>→</th>
<th>Статус2</th>
</tr>
</thead>
<tbody>
<tr class='trCls'>
<td>04.09.2024 10:09</td><td>Инфраструктура_ ЦПЛ</td>
<td>TR000000001023</td><td>Оценка - валидация СН</td>
<td>→</td><td>Анализ</td>
</tr>
<tr class='trCls'><td>04.09.2024 21:00</td>
<td>Тестовый сервис</td><td>000000001946</td>
<td>Недоступность функций из-за исчерпания ресурсов на виртуальном сервере</td>
<td>→</td><td>Отказ виртуального сервера</td>
</tr>
<tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001947</td><td>Недоступность функций из-за сбоя или некорректной работы подключения к сети Интернет</td><td>→</td><td>Невозможность соединения</td>
</tr>
<tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001948</td><td>Недоступность функций из-за исчерпания ресурсов СУБД</td><td>→</td><td>Невозможность работы с БД</td>
</tr>
<tr class='trCls'><td>04.09.2024 10:09</td><td>Инфраструктура_ ЦПЛ</td><td>TR000000001023</td><td>Оценка - валидация СН</td><td>→</td><td>Анализ</td>
</tr>
<tr class='trCls'><td>04.09.2024 21:00</td><td>Тестовый сервис</td><td>000000001946</td><td>Недоступность функций из-за исчерпания ресурсов на виртуальном сервере</td><td>→</td><td>Отказ виртуального сервера</td>
</tbody>
</table>
</div>