固定侧边栏下如何将表格居中于侧边栏与屏幕边缘之间

针对固定侧边栏旁表格居中的需求，以下是直接可落地的解决方案，解决侧边栏滚动、表格全屏无留白的问题：

核心修改思路 #

1. 为表格容器设置左侧边距，避开固定侧边栏的占用空间
2. 让表格容器占据侧边栏右侧的全部剩余宽度，通过flex布局实现表格在该区域内水平居中
3. 添加上下内边距与左右留白，避免表格紧贴屏幕边缘
4. 优化侧边栏的自适应细节，避免固定值导致的适配问题

修改后的完整代码 #

CSS 部分 #

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

body {
  background-color: #292929;
  /* 防止页面横向滚动溢出 */
  overflow-x: hidden;
}

.sidebar-menu {
  background-color: #0A0A0A;
  display: flex;
  flex-direction: column;
  width: 100px;
  position: fixed;
  height: 100%;
  padding: 20px;
  padding-bottom: 100px;
  justify-content: flex-start; /* 修正原无效的top值 */
  align-items: center;
  border-right: 3px solid #1098F7;
  /* 固定侧边栏层级，避免被表格覆盖 */
  z-index: 10;
}

.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: auto; /* 自动将logo推至侧边栏底部，适配不同屏幕高度 */
  user-select: none;
}

.fa-solid {
  color: white;
}

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

/* 新增表格容器样式 */
.table-container {
  margin-left: 140px; /* 侧边栏总宽度：100px宽度 + 20px*2左右padding */
  width: calc(100% - 140px); /* 占据侧边栏右侧的全部剩余宽度 */
  display: flex;
  justify-content: center; /* 让表格在剩余空间内水平居中 */
  padding: 2rem 1rem; /* 上下内边距 + 左右留白 */
  box-sizing: border-box;
}

table {
  font-size: 30px;
  color: white;
  border-collapse: collapse;
  font-family: "Roboto", sans-serif;
  font-weight: 700;
  min-width: 1300px;
  max-width: 100%; /* 屏幕剩余宽度不足时，表格不超出容器 */
}

HTML 部分（无需修改） #

<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>header1</th>
        <th>header2</th>
        <th>header 3</th>
        <th>header 4</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td>10</td>
        <td>1000</td>
        <td>1000</td>
      </tr>
    </tbody>
  </table>
</div>

关键修改说明 #

1. 侧边栏优化：

   • 将justify-content: top改为标准值flex-start
   • 用margin-top: auto替代固定的margin-top: 400px，让logo自动适配不同屏幕高度
   • 添加z-index:10确保侧边栏始终在表格上方

2. 表格容器控制：

   • margin-left:140px精准避开固定侧边栏的占用空间
   • width: calc(100% -140px)让容器填满侧边栏右侧的所有可用宽度
   • flex布局的justify-content:center实现表格在剩余区域内的水平居中
   • padding属性控制表格与屏幕边缘的留白，避免视觉拥挤

3. 表格适配：

   • max-width:100%确保当屏幕剩余宽度小于表格最小宽度时，表格不会超出容器范围，此时容器会自动出现横向滚动条，保证内容可访问

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