点击侧边栏切换开关后表格未适配调整，如何通过CSS实现布局自适应

可以完全通过CSS实现该需求，不需要额外编写JS逻辑，核心是利用侧边栏开关的checkbox选中状态，通过CSS兄弟选择器同步修改主内容区域的布局，同时给表格加适配规则即可。

第一步：修改主内容容器的基础样式 #

给你现有CSS里的.main类新增过渡和宽度规则，保证切换时动画流畅：

.main {
  margin: 0 auto;
  display: block;
  height: 100%;
  margin-top: 60px;
  /* 新增内容 */
  width: 100%;
  transition: all 250ms ease-in-out;
}

第二步：新增侧边栏展开时的主内容偏移规则 #

在CSS中新增以下规则，当侧边栏开关勾选时，主内容自动右移、宽度适配剩余视口：

input[type='checkbox']:checked ~ .main {
  margin-left: 310px;
  width: calc(100% - 310px);
}

注：310px为你当前设置的侧边栏宽度，后续如果调整侧边栏宽度同步修改这个数值即可

第三步：新增表格适配规则 #

避免侧边栏展开后视口宽度不足导致表格变形，给表格外层容器添加横向滚动能力，直接修改index.component.html里表格外层的div样式即可：

<div style="margin: 0 auto; width: 90%; overflow-x: auto;">
  <table class="table table-bordered">
    <!-- 表格原有内容保持不变 -->
  </table>
</div>

结构校验 #

需要保证你的HTML结构中，.main主内容容器和侧边栏的checkbox开关是同级元素，这样CSS的兄弟选择器~才能正常生效，触发样式变化。

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