Bootstrap移动端表格溢出屏幕、导航栏宽度不匹配问题求助

我并非专业Web开发者，尝试过相关Bootstrap表格溢出的解决方案，但都无效。

项目在桌面端显示正常，仅移动端出现问题，以下是移动端显示效果模拟图：

我需要实现两个效果：

• 表格适配屏幕宽度，超出时显示横向滚动条
• 解决导航栏与表格宽度不一致的问题

以下是简化后的代码（仅保留关键元素、类和样式），如需其他内容可告知：

<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>

内容的提问来源于stack exchange，提问作者DotNetRussell