Search code examples
htmlcssbootstrap-4

Bootstrap table overflows screen and navbar doesn't

So this is a bit of a compound question. Please keep in mind that I'm not a professional webdev. Also I did try the solutions here and here

The picture is a mockup of how it looks on mobile. On desktop everything looks fine. It isn't until I open it up on mobile that there's any issues.

Ideally I'd like the table to fit on the screen with a scrollbar but it's also bothersome that the nav bar doesn't extend the same width as the table.

enter image description here

I've tried to boil the code down to just elements, classes and styles. Please let me know if there's anything else you'd like to see

<head>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/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>
Solution

  • As from Bootstrap 4, they have covered this (added responsiveness).

    You can either make table responsive with being breakpoint specific:

    Using .table-responsive{-sm|-md|-lg|-xl} as needed to create responsive tables up to a particular breakpoint. From that breakpoint and up, the table will behave normally and not scroll horizontally.

    And by making table always (on all screen widths) responsive (scrollbar), by adding .table-responsive class on table.

    For something more advanced (making) columns go into new row and similar, you can refer to this responsive data tables