如何在100%宽table-cell中实现可折叠div与另一div横向布局？

这个需求用CSS Flexbox就能完美解决，我给你两种实用方案——一种是带JS控制的动态版本，另一种是纯CSS的无脚本版本，都能满足你在table-cell容器里的布局要求：

核心思路 #

父容器使用display: flex，默认让第一个div（侧边栏）占25%宽度，第二个div（主内容）自动填充剩余75%空间；当侧边栏折叠时，通过修改它的宽度为0，主内容会自动占据全部可用空间。如果需要平滑过渡效果，给侧边栏加个transition属性就行。

方案1：JS控制的动态折叠（带平滑过渡） #

这种方案适合需要和其他交互逻辑结合的场景，代码清晰易维护：

HTML结构 #

<div class="table-cell-container"> <!-- 你的table-cell容器 -->
  <div class="flex-container">
    <div class="sidebar" id="sidebar">
      👉 可折叠侧边栏内容<br>
      列表项1<br>
      列表项2<br>
      列表项3
    </div>
    <div class="main-content">
      📄 主内容区域<br>
      当侧边栏折叠时，我会自动占满整个宽度！
    </div>
  </div>
  <button onclick="toggleSidebar()">点击切换折叠状态</button>
</div>

CSS样式 #

/* 模拟你的table-cell容器 */
.table-cell-container {
  display: table-cell;
  width: 100%; /* 确保容器占满可用宽度 */
  border: 1px solid #ddd;
  padding: 15px;
}

/* 核心flex容器 */
.flex-container {
  display: flex;
  width: 100%;
  height: 250px; /* 给个固定高度方便预览，可根据需求调整 */
  margin-bottom: 10px;
}

/* 可折叠侧边栏 */
.sidebar {
  flex: 0 0 25%; /* 固定25%宽度，不伸缩 */
  background-color: #f5f5f5;
  padding: 12px;
  transition: all 0.3s ease; /* 平滑过渡所有变化 */
  overflow: hidden; /* 防止内容溢出 */
  border-right: 1px solid #ddd;
}

/* 折叠状态的侧边栏 */
.sidebar.collapsed {
  width: 0;
  flex: 0 0 0%; /* 覆盖默认的flex-basis */
  padding: 0;
  border-right: none;
}

/* 主内容区域 */
.main-content {
  flex: 1; /* 自动占满剩余空间 */
  background-color: #fff;
  padding: 12px;
}

JS逻辑 #

function toggleSidebar() {
  const sidebar = document.getElementById('sidebar');
  sidebar.classList.toggle('collapsed');
}

方案2：纯CSS无脚本折叠 #

如果不需要复杂的JS逻辑，用checkbox配合兄弟选择器就能实现纯静态的折叠效果：

HTML结构 #

<div class="table-cell-container">
  <!-- 隐藏的checkbox作为开关 -->
  <input type="checkbox" id="sidebar-toggle" hidden>
  
  <div class="flex-container">
    <div class="sidebar">
      👉 可折叠侧边栏内容<br>
      列表项1<br>
      列表项2<br>
      列表项3
    </div>
    <div class="main-content">
      📄 主内容区域<br>
      点击下方按钮切换侧边栏状态！
    </div>
  </div>
  
  <!-- 用label触发checkbox -->
  <label for="sidebar-toggle">点击切换折叠状态</label>
</div>

CSS样式（在方案1的基础上添加） #

/* 选中checkbox时折叠侧边栏 */
#sidebar-toggle:checked + .flex-container .sidebar {
  width: 0;
  flex: 0 0 0%;
  padding: 0;
  border-right: none;
}

/* 美化label按钮 */
label {
  cursor: pointer;
  padding: 6px 12px;
  background-color: #007bff;
  color: #fff;
  border-radius: 4px;
  display: inline-block;
}

关键细节说明 #

1. table-cell容器适配：因为table-cell本身是自适应宽度的，所以给flex容器设置width: 100%，确保它能填满table-cell的可用空间。
2. flex属性的作用：flex: 0 0 25%表示侧边栏不放大、不缩小，基础宽度为25%；主内容的flex: 1表示自动填充剩余所有空间。
3. 平滑过渡：通过transition属性让折叠/展开过程更自然，避免生硬的尺寸变化。

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