如何在div中居中表格且避免溢出遮挡固定导航栏？

一、核心问题解决思路 #

针对你遇到的表格居中后超宽被导航栏遮挡、tbody单独显示滚动条两个需求，通过调整容器布局和表格样式实现：

二、修改后的完整代码 #

1. 基础导航栏CSS（原navbar.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;
}

.navbar{
    display: flex;
    position: fixed;
    height: 100vh;
    width: 15rem;
    background-color: #fafafa;
    z-index: 100; /* 确保导航栏始终在最上层 */
}

.navbar-nav{
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    overflow-y: auto; /* 导航项过多时支持纵向滚动 */
}

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

.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);
}

2. 表格样式（dashboard.css）

.div-table{
    border-radius: 10px;
    max-width: 100%; /* 限制容器不超出main的可用宽度 */
    margin: 0 auto; /* 实现表格在main中水平居中 */
    overflow-x: hidden; /* 隐藏外层滚动，让tbody单独滚动 */
}

.table {
    width: 48rem;
    border: 1px solid white;
    table-layout: fixed; /* 固定单元格宽度，确保thead和tbody对齐 */
    border-collapse: collapse; /* 合并边框避免间隙 */
}

.table thead{
    background-color: #0f9660;
    color: white;
    position: sticky;
    top: 0; /* 表头固定在顶部，滚动时不消失 */
}

.table th, .table td{
    width: 6rem;
    padding: 0 1rem;
    text-align: center;
    border: 1px solid #ddd; /* 添加边框增强可读性 */
}

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

.table tbody {
    display: block; /* 将tbody设为块级元素，支持滚动 */
    max-height: 300px; /* 自定义tbody最大高度，超出后显示纵向滚动条 */
    overflow-x: auto; /* tbody单独显示横向滚动条 */
    width: 100%; /* 确保tbody宽度与表格一致 */
}

.table thead tr {
    display: block; /* 表头行设为块级，与tbody宽度对齐 */
}

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

3. HTML结构（无需修改，可直接添加h1标题）

<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>
    <!-- 后续可添加h1标题 -->
    <h1>人员列表</h1>
    <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>abdelazizabde@gmail.com</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>

三、关键修改说明 #

1. 解决导航栏遮挡问题

   • 给navbar添加z-index:100确保导航栏始终在最上层
   • 用.div-table的max-width:100%限制表格容器不超出main的可用宽度，避免表格超宽后向左溢出到导航栏区域
   • 通过margin:0 auto实现表格在main中水平居中

2. 实现tbody单独滚动

   • 使用table-layout:fixed固定单元格宽度，确保表头和表体的列对齐
   • 将thead tr和tbody设为display:block，让tbody成为独立的可滚动容器
   • 给thead添加position:sticky; top:0，实现滚动时表头固定在顶部
   • 自定义tbody的max-height，超出后自动显示纵向滚动条，同时开启overflow-x:auto显示横向滚动条

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