горизонтальная полоса прокрутки отображается только внизу страницы, используя bootstrap

Question

Я пытаюсь сделать страницу, на которой отображаются данные из базы данных, потому что я хочу сделать ее доступной на небольших устройствах, где не все данные помещаются на экран, поэтому пользователь должен иметь возможность прокрутки слева направо , Но проблема, с которой я столкнулся сейчас, заключается в том, что полоса прокрутки появляется только тогда, когда вы находитесь внизу страницы. Изображение, когда страница находится внизу , Страница, когда я прокручиваю даже немного . Поэтому в результате я хочу, чтобы полоса прокрутки всегда была на месте (кроме случаев, когда страница достаточно велика для отображения всех данных.)

Я попробовал ответить на этот пост: Только горизонтальная полоса прокрутки появляется внизу страницы , но, к сожалению, это не сработало.

Мой код:

           <div class="container-fluid w100 h-100 mt-5">
                <div class="row">
                    <nav style="position: fixed; "class="col-md-2  pt-5 sidebar h-100 w100">
                     ....
                    </nav

                    <main role='main' style='background: white;' class='col-md-10 ml-auto col-lg-10 ';>
                    <h2 class='d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center 
                     pt-3 pb-2 mb-3'>Afspraken:</h2>
                    <div class='table-responsive'><table class='table table-sm table-striped'><thead 
                    align='left'><tr><th>Naam:</th><th>Reparatie</th><th>Telefoonnummer</th> 
                    <th>Email</th><th>Status</th><th>Datum</th><th>Datum</th></tr></thead><tbody>```

Answer 1

Проблема в том, что вы включаете только overflow-x на вашей таблице и overflow-y на теле. Я рекомендую, чтобы вы использовали overflow-y на вашей таблице и установили фиксированную высоту на вашем div с помощью класса table-responseive. Другой вариант - добавить overflow-x к вашему телу и отобразить всю ширину таблицы на вашем теле.