Как разместить много таблиц на странице, используя систему с несколькими вкладками?

Question

Я нахожусь в проекте, где я должен показать 4 таблицы на одной странице. Я нашел это: https://www.codeandcourse.com/how-to-display-data-from-mysql-database-into-html-table-using-php/.

Я пытался установить его в систему, используя карты с вкладками (например, https://bootsnipp.com/snippets/z2Q7x), но это к сожалению, не работает ...

На самом деле, когда я вставляю таблицу, в которой отображаются все элементы из моей базы данных SQL, я не вижу конца своей страницы ... Например, я вставил нижний колонтитул, и я не вижу его, если моя таблица находится на странице.

Фактически весь код, следующий за моей таблицей, отсутствует в конечном результате.

Вот мой Фактическая работа:

    <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->

<div class="container">

    <div class="row">
        <div class="col-md-12">
            <div style="height: 2em"></div>
            <div class="card">
                <div class="card-header">
                    <h5>My tabs system</h5>
                    <ul class="nav nav-tabs card-header-tabs"> 
                        <li class="nav-item">
                            <a class="nav-link active" id="first-tab" data-toggle="tab" href="#first" role="tab" aria-controls="first" aria-selected="true">First</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"id="second-tab" data-toggle="tab" href="#second" role="tab" aria-controls="second" aria-selected="false">Second</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"id="third-tab" data-toggle="tab" href="#third" role="tab" aria-controls="third" aria-selected="false">Third</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link"id="fourth-tab" data-toggle="tab" href="#fourth" role="tab" aria-controls="fourth" aria-selected="false">Fourth</a>
                        </li>
                    </ul>
                </div>
                <div class="card-body">
                    <div class="tab-content" id="myTabContent">
                        <div class="tab-pane fade show active" id="first" role="tabpanel" aria-labelledby="first-tab">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>

                        </div>
                        <div class="tab-pane fade" id="second" role="tabpanel" aria-labelledby="second-tab">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>
                        </div>
                        <div class="tab-pane fade" id="third" role="tabpanel" aria-labelledby="third-tab">
                            <table class="table table-striped">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>
                        </div>
                  <div class="tab-pane fade" id="fourth" role="tabpanel" aria-labelledby="fourth-tab">
                            <table class="table table-striped">
                            <table>
                                <tr>
                                    <th>Id</th>
                                    <th>Username</th>
                                    <th>Password</th>
                                </tr>
                                        <?php
                                        $conn = mysqli_connect("localhost", "root", "", "company");
                                        // Check connection
                                        if ($conn->connect_error) {
                                        die("Connection failed: " . $conn->connect_error);
                                        }
                                        $sql = "SELECT id, username, password FROM login";
                                        $result = $conn->query($sql);
                                        if ($result->num_rows > 0) {
                                        // output data of each row
                                        while($row = $result->fetch_assoc()) {
                                        echo "<tr><td>" . $row["id"]. "</td><td>" . $row["username"] . "</td><td>"
                                        . $row["password"]. "</td></tr>";
                                        }
                                        echo "</table>";
                                        } else { echo "0 results"; }
                                        $conn->close();
                                        ?>
                            </table>
                        </div>
                    </div>

                </div>
            </div>
        </div> 

    </div>
</div>

Спасибо за вашу помощь!

Jojorealisateur