主页 / 问题 / 1594627
Accepted
S.H.
Asked:2024-09-23 17:50:16 +0800 CST2024-09-23 17:50:16 +0800 CST

在 div 中滚动 - 不出现

  • 772

我有一个复杂的 Web 应用程序，其中嵌入了一个包含表格的小 div。也就是说，从字面上看，在应用程序页面上有一个“窗口”（其大小固定为浏览器窗口的百分比，正如我从外部标志中了解到的那样），我需要在其中显示一个具有可变行数的表格。

当然，我希望当 div 中有大量行时出现垂直滚动条。

我正在为此 div 创建 html 和 css 代码

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 {
        overflow: scroll;
        overflow-y: scroll;
        overflow-x: scroll;
    }

然后发生以下情况：当我测试我的 div 时，一切正常，调用栏出现。但它不会出现在“真实”页面上。

我不太了解CSS，但我怀疑在“更高级别的块”之一中，滚动可能会以某种方式“全局取消”。

请告诉我如何尝试解决这个问题？谢谢。

附言。我知道关于最低限度可重现示例的规则，但我不知道如何从整个 Web 应用程序中“剪切”示例页面

html

1 个回答

  1. Best Answer

    下面是一个在 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>

    • 1

相关问题