为表格添加margin导致侧边栏下移的原因及解决方法

问题根源 #

你遇到的是**CSS外边距折叠（Margin Collapse）**问题：当.table-container设置margin-top时，作为body的第一个子元素，它的顶部外边距会和body的顶部外边距合并，导致整个body被向下推。侧边栏是position:fixed（相对于视口固定），本身位置没动，但body下移后页面出现滚动，视觉上看起来侧边栏同步下移了。

修复方案（任选其一即可） #

方案1：打破body的外边距折叠 #

给body添加一个极小的顶部内边距或边框，阻断子元素和父元素的外边距合并：

body{
    background-color:#292929;
    padding-top: 1px; /* 仅用于打破外边距折叠，不影响视觉 */
}

方案2：用padding替代margin实现表格下移 #

把.table-container的margin-top换成padding-top，这样不会触发外边距折叠：

.table-container {
    margin-left: 143px;
    width: calc(100vw - 143px);
    /* 移除margin-top，调整padding-top到需要的间距 */
    padding: 200px 100px 100px; /* 上、左右、下 */
}

方案3：用Flex布局重构页面结构 #

将body设置为Flex容器，彻底避免外边距问题：

body{
    background-color:#292929;
    display: flex;
    min-height: 100vh;
}
/* 保持侧边栏fixed不变，主内容区自动填充剩余空间 */
.table-container {
    flex: 1;
    margin-left: 143px;
    padding: 100px;
    margin-top: 100px; /* 此时margin-top不会再影响body */
}

修改后的完整代码示例（以方案1为例） #

*{
    margin:0;
    padding:0;
    list-style: none;
}

body{
    background-color:#292929;
    padding-top: 1px; /* 新增：打破外边距折叠 */
}

.sidebar-menu{
    background-color:#0A0A0A;
    display:flex;
    flex-direction: column;
    width:100px;
    position: fixed;
    height:100%;
    padding: 20px;
    padding-bottom:100px;
    justify-content: top;
    align-items: center;
    border-right: 3px solid #1098F7;
    z-index:1;
}

.sidebar-items{
    margin:40px 0;
}

.sidebar-items:hover{
    color:#1098F7;
}

#sidebar-logo{
    color:#1098F7;
    font-family: "Raleway", sans-serif;
    font-weight: 900;
    font-size: 40px;
    margin-top:400px;
    user-select: none;
    }

.fa-solid{
    color:white;
}
.fa-solid:hover{
    color:#1098F7;
}

.table-container {
    margin-left: 143px;
    width: calc(100vw - 143px);
    margin-top: 100px;
    padding:100px;
}

table{
    font-size:30px;
    color:white;
    border-collapse: separate;
    border-spacing: 0 10px; 
    margin-top: -10px;
    font-family: "Roboto", sans-serif;
    font-weight: 700;
    min-width:1300px;
    margin: auto;
}

@media (max-width:1400px) {
    table{
        min-width: 1000px;
    }
    
}

@media (max-width:1000px) {
    table{
        min-width: 600px;
    }
    
}

tbody tr{
    color:rgb(216, 216, 216);
    background-color: #122d5661;
    height:60px;
}

thead tr{
    color: #1098F7;
    background-color:rgba(9, 4, 31, 0);
}

th, td{
    text-align:center;
    padding:7px 0;
}

td:first-child {
    border-left-style: solid;
    border-top-left-radius: 20px; 
    border-bottom-left-radius: 20px;
    border-color:rgba(255, 255, 255, 0);
}
td:last-child {
    border-right-style: solid;
    border-bottom-right-radius: 20px; 
    border-top-right-radius: 20px;
    border-color:rgba(255, 255, 255, 0);
}

<div class="sidebar">
    <ul class="sidebar-menu">
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-plus fa-4x"></i></a></li>
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-chart-simple fa-4x"></i></a></li>
        <li class="sidebar-items"><a href=""><i class="fa-solid fa-hourglass-half fa-4x"></i></a></li>
        <h1 id="sidebar-logo">HMH</h1>
    </ul>

</div>

<div class="table-container">
    <table>
        <thead> 

            <tr>
                <th>ACTIVITY</th>
                <th>TIME</th>
                <th>DAYS</th>
                <th>T.P.D</th>
                <th>TODAY</th>
            </tr>
        </thead>

        <tbody>
            <tr>
                <td>run</td>
                <td>data</td>
                <td>112</td>
                <td>112</td>
                <td>Yes</td>
            </tr>
        </tbody>
    </table>
</div>

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