Таблица начальной загрузки переполняет экран, а панель навигации - нет

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

Изображение представляет собой макет того, как это выглядит на мобильном телефоне. На рабочем столе все выглядит нормально. Только когда я открою его на мобильном телефоне, возникнут какие-либо проблемы.

В идеале я бы хотел, чтобы таблица помещалась на экране с полосой прокрутки, но также беспокоит то, что панель навигации не имеет той же ширины, что и таблица.

Я попытался свести код только к элементам, классам и стилям. Пожалуйста, дайте мне знать, если есть что-то еще, что вы хотели бы увидеть

<head>
  <link rel = "stylesheet" href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
        integrity = "sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin = "anonymous">
  <!-- ✅ load jQuery ✅ -->
  <script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>

<body>
    <div id = "banner_element"></div>
    <nav class = "navbar navbar-expand-lg navbar-dark bg-dark" style = "margin-top: 10px;">             
        <button class = "navbar-toggler" 
                type = "button" 
                data-toggle = "collapse" 
                data-target = "#navbarDiv" 
                aria-controls = "navbarDiv" 
                aria-expanded = "false" 
                aria-label = "Toggle navigation">
            <span class = "navbar-toggler-icon"></span>
        </button>

        <div class = "collapse navbar-collapse" id = "navbarDiv">
            <ul class = "navbar-nav">
                <li class = "nav-item">
                    <a class = "nav-link" href = "/">Click me</a>
                </li>
            </ul>
        </div>
    </nav>
    <div class = "container-fluid" style = "margin-bottom: 100px;">
        <div class = "row d-flex justify-content-center">
            <h1 class = "mb-3">Page Title</h1>
        </div>
        <div style = "padding-bottom: 100px;">
            <table class = "table" style = "overflow-x: visible; overflow-y: visible; height: 100%;" id = "myTable">
                <thead>
                    <th></th>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                </thead>
                <tr id='${element["Id"]}'>
                  <td><button onclick = "location.href='/'">🔍</button></td>
                  <td>1</td>
                  <td>2</td>
                  <td>3</td>
                  <td>4</td>
                  <td>5</td>
                </tr>
            </table>
        </div>
    </div>
</body>

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
1
0
86
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Начиная с Bootstrap 4, они покрыли это (добавили отзывчивость).

Вы можете сделать таблицу отзывчивой с учетом точки останова:

Использование .table-responsive{-sm|-md|-lg|-xl} по мере необходимости для создания адаптивных таблиц до определенной точки останова. С этой точки останова и выше таблица будет вести себя нормально и не будет прокручиваться по горизонтали.

И сделав таблицу всегда (на любой ширине экрана) отзывчивой (полоса прокрутки), добавив класс .table-responsive на таблицу.

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

эта ссылка, которую вы разместили, потрясающая

DotNetRussell 23.11.2022 01:31

Я только что накатил css по этой ссылке, и он отлично работал. Спасибо

DotNetRussell 23.11.2022 01:35

Рад, что это помогает. :) На самом деле есть много ресурсов, которые используют стили для «обобщенных» элементов -> под обобщенными я подразумеваю html-элементы, которые используются (без использования классов) и фактически применяются независимо, если вы используете <table>trtd Путем поиска «Отзывчивые данные таблицы», вы сможете найти больше

str1ng 23.11.2022 01:36

Другие вопросы по теме