Thiết kế website giá rẻ

Question

I have a dashboard HTML page that has 2 sections:

for vertical navbar
for a table of people (and optionally some h1 text later on)

I just want a way for the table to be centered in main, and when it gets smaller a scrollbar appears for x-overflow.

THE PROBLEM IS: when the table gets bigger than the screen it starts hiding behind nav

Additionally if any of you can help me get the scrollbar to appear on the table body rather than outside the table or on the div that would also be greatly appreciated

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../favicon.png" type="image/x-icon">
    <link rel="stylesheet" href="../nav.css">
    <link rel="stylesheet" href="dashboard.css">
    <title>Dashboard</title>
</head>
<body>
    <nav class="navbar">
        <ul class="navbar-nav">
            <li class="navbar-item"><img src="../cri.png" alt="Logo of CRI"></li>
            <li class="navbar-item active"><a href="../dashboard/dashboard.html" class="nav-link">Dashboard</a></li>
            <li class="navbar-item"><a href="../search/search.html" class="nav-link">Advanced Search</a></li>
            <li class="navbar-item"><a href="../current/current.html" class="nav-link">Current interns</a></li>
            <li class="navbar-item"><a href="../logs/logs.html" class="nav-link">Read Logs</a></li>
            <li class="navbar-item"><a href="#" class="nav-link">Disconnect</a></li>
        </ul>
    </nav>
    <main>
        <div class="div-table">
            <table class="table">
                <thead>
                    <tr>
                        <th>
                            Nom
                        </th>
                        <th>
                            Prenom
                        </th>
                        <th>
                            CIN
                        </th>
                        <th>
                            Email
                        </th>
                        <th>
                            Numero
                        </th>
                        <th>
                            Etudiant
                        </th>
                        <th>
                            CV
                        </th>
                        <th>
                            Accepter
                        </th>
                        <th>
                            Refuser
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                    <tr>
                        <td>Abdelhak</td>
                        <td>Abdelaziz</td>
                        <td>BD2034591</td>
                        <td>[email protected]</td>
                        <td>+212672729112</td>
                        <td>Oui</td>
                        <td><a class="file" href=""><img class="icons" src="file.svg" alt="file"></a></td>
                        <td><a class="link-accepted" href=""><img class="icons" src="accepted.svg" alt="accepted"></a></td>
                        <td><a class="link-rejected" href=""><img class="icons" src="rejected.svg" alt="rejected"></a></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </main>
</body>
</html>

nav css

:root{
    font-size: 16px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    scrollbar-width: thin;
}

body{
    margin: 0;
    padding: 0;
    color: black;
    overflow-x: hidden;
    overflow-y: auto;
}

main{
    margin-left: 15rem;
    padding: 1rem;
    overflow-x: auto;
    scrollbar-width: thin;
}

.navbar{
    display: flex;
    position: fixed;
    height: 100vh;
    width: 15rem;
    background-color: #fafafa;
}

.navbar-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.navbar-item{
    width: 15rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-item:first-child{
    width: 15rem;
    height: 5rem;
}

.navbar-item:first-child img{
    width: 7rem;
    height: auto;
}


.navbar-item:not(:first-child):hover{
    background-color: rgb(222, 221, 221);
}

.navbar-item:not(:first-child):active {
    background-color: #0f9660;
}

.navbar-item:not(:first-child):active>a {
    color: white;
}

.navbar-item:last-child{
    border: none;
    margin-top: auto;
}

.navbar-item:last-child a:hover {
    background-color: #da413e;
    color: white;
}


.nav-link{
    color: black;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.navbar-item svg{
    width: 1rem;
    height: auto;
}

.active{
    background-color: rgb(222, 221, 221);
}

dashboard.css

.table thead{
    background-color: #0f9660;
    color: white;
}

.div-table{
    border-radius: 10px;
}

.div-table table{
    width: 48rem;
    border: 1px solid white;
}

.table th{
    width: 6rem;
    height: 2rem;
    padding: 0 1rem;
}
.table td{
    padding: 0 1rem;
    text-align: center;
}

.table tr:nth-of-type(even){
    background-color: #e2e2e2;
}

.icons{
    width: auto;
    height: 1rem;
}

I used display: flex and justify-content: center to main and it works, but when the table is wider than main, the left side starts to disappear and hides behind nav.

I also tried to remove fixed from the nav bar and make everything flex but it caused weird issues, especially since I need the nav bar to be fixed in case of y-overflow

Thiết kế website giá rẻ

Danh mục

How do I center a table inside a div while not losing overflow