The Bootstrap table spills off the page and the navbar fails to align properly with the screen

A complex question awaits your attention. I must clarify that I lack the expertise of a professional web developer. I have already attempted the solutions referenced here and here

The provided image represents the mobile view, whereas the desktop view appears flawless. The issues arise only when viewed on a mobile device.

My desire is for the table to fit within the screen with a scrollbar; however, it is also disconcerting that the navigation bar fails to match the width of the table.

https://i.sstatic.net/10plk.png

I've condensed the code to the essential elements, classes, and styles. Kindly inform me if you require any additional information.

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="24464b4b50575056455464100a170a15">[email protected]</a>/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>

Answer №1

Bootstrap 4 has addressed the issue of responsiveness.

To create responsive tables, you have two options:

1. Use

.table-responsive{-sm|-md|-lg|-xl}
to make tables responsive up to a certain breakpoint. After that breakpoint, the table will not horizontally scroll.

2. Add the .table-responsive class to make the table always responsive (with a scrollbar) on all screen widths.

If you need more advanced functionality, like making columns go into a new row on smaller screens, check out this resource on responsive data tables

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Organize the HTML table upon importing

In my code, I am populating a table with data retrieved from a JSON object. Here is the JavaScript snippet: if (jsonObj[0].array !== 'undefined' && jsonObj[0].array.length > 0) { for (var i = 0; i < jsonObj[0].array.length; i++ ...

Tips on making a material-ui grid fill up the entire screen

Currently, I am working on developing a layout that resembles most editor/IDE setups using material-ui and react. In this layout, I have a top bar, a bottom bar, side panels on both sides, and a center area. My main concern is how to ensure that this grid ...

Create a dynamic and interactive website using a combination of jQuery and AngularJS

I recently came across an interesting tidbit on the FAQs of Angular stating that "Angular can use jQuery if it's present in your app when the application is being bootstrapped". This got me thinking, is it considered a best practice to include both j ...

Having trouble with setting an image as a background in CSS for Nativescript on iOS?

In my NativeScript app, I am trying to set an image as the background using the CSS property background-image: url("res://ic_more"). It works perfectly on Android, but unfortunately, it does not display on iOS devices. I have confirmed that the image is l ...

After applying styling, the modal close button refuses to be clicked

I'm currently facing an issue where I am trying to enhance a modal window with a close button, but encounter problems once styling is applied. The unique aspect of this problem arises from the fact that the close button is not directly in the page HTM ...

Is it possible to access the CSS property from an external CSS file even when inline styles are used?

Is there a way to retrieve the css property from an external source using JavaScript or jQuery even if inline styles are applied to the same element? Here's an example: <div id="my" style='left:100px'>some content</div> <styl ...

Enhancing User Interaction with Bootstrap Input Forms

Struggling with a CSS and Bootstrap issue, I am unable to find a solution. The problem I am facing is that the content in a div form is not responsive within its parent div. It always extends beyond the parent div and does not adjust its size when the scre ...

"Using jQuery autocomplete to enhance user experience by providing both value and

Thank you for taking the time to read this. I have been searching for a solution to my problem by reading similar posts, but I am still confused about how to make it work. Here's the issue: I have a jQuery autocomplete that retrieves an array from a ...

Having trouble with this code// Does anyone know how to make the div slide in line with other divs when hovering over it?

After spending countless hours analyzing and trying various solutions, I have come to the realization that I need to seek help with my code. The task at hand is proving to be incredibly frustrating, and I have exhausted all other options before resorting t ...

What is the secret to keeping a hover effect active?

As I hover over the buttons in my stack, a text box appears on the right side. The intention is for this text box to act as a scroll box, but it disappears when I move my mouse to scroll because it needs to be continuously hovered upon to stay active. To ...

The HTML image is not updating, the function does not appear to be triggering

My attempt to add a source to an image using JavaScript and some jQuery code I found online isn't working as expected: <html> <head> <script src = "http://www.example.com/images/"> var count=1; var initnumber=100 ...

Utilizing Gulp variables to create dynamic destination file names?

As a newcomer to gulp, I am curious about the feasibility of achieving my desired outcome. Here is the structure of my projects: root | components | | | component_1 | | styles.scss | | actions.js | | template.html | | ... | componen ...

The compatibility issue between Jquery highlight and show more/less function is causing them to malfunction when used

I am facing an issue where, while trying to search for a specific word to highlight it, the "show more" button closes and only displays the text prior to clicking the button. How can I ensure that the expanded content remains open while searching for a wor ...

Turn the image inside the div with the nth-child selector into a clickable link

I'm currently facing a challenge on my Squarespace website where I need to add individual links to various images using jQuery. The issue is that these images do not have a shared class, and unfortunately, I am limited to adding custom CSS or JavaScri ...

The chosen options will automatically populate the text-boxes that require dynamic summation

I am encountering an issue with a select option that should dynamically populate specific values in text-boxes (different prices) based on the selected option. The goal is to sum up the values in the text-boxes and display the total in another text-box. Ho ...

Keep duplicating a single object until it fills up the entire screen

Is there a way to make an HTML/CSS element repeat until it covers the entire screen height, without repeating it indefinitely? #container{ height: 100vh; width: 100vw; } .dotts{ background-color: yellow; border-radius: 50%; height: 20px; width: 20p ...

Achieving consistent margins across various browsers for UL elements

UL element margins are the same, but Firefox and IE are displaying differently. FULL CODE: <html> <head> <style> body { background-color: Red; } ul ...

I would like to know how to incorporate the "form-control" class (from Bootstrap) into the {{form.as_p}} input field

Is there a way to include the "form-control" bootstrap class to the input field in {{form.as_p}}? <form class="form-inline" action="" method="post> {% csrf_token %} <div class="row"> ...

What is causing the action button in my MUI snackbar to occupy an additional line?

I'm currently learning how to use MUI and I'm struggling with a specific issue. The close button in my code is appearing on a separate line, but I want it to be on the same line as the word "again". I've tried experimenting with absolute pos ...

Eliminating unnecessary CSS from the codebase of a website

Currently, I am making adjustments to a website template that I downloaded for free online. I have noticed that even if I delete a div from the code, the corresponding CSS styles remain in one or more files. Is there any tool available that can automatic ...