如何用表格实现CSS侧边栏？侧边栏及内容无法显示求助

侧边栏无法显示。

运行以下代码后，页面内容完全不显示，仅看到空白窗口。原本期望页面能展示sidebar侧边栏和mainse区域的内容，但实际mainse内的所有元素都无法显示。

原代码 #

CSS代码

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  display: block;
  min-height: 100%;
  background: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg") no-repeat;
}

top {
  margin-bottom: 52px;
  position: top;
  display: inherit;
}

content {
  display: table;
}

sidebar {
  display: table-column;
  width: 200px;
}

mainse {
  appearance: none;
  -webkit-appearance: none;
  display: table-column;
}

HTML代码

<content>
  <sidebar></sidebar>
  <mainse>
    <label class="switch">
      <input type="checkbox" disabled checked>
      <span class="slider-switch"></span>
    </label><br><br>
    <label class="switch">
      <input type="checkbox">
      <span class="slider-switch"></span>
    </label><br><br>
    <checkbox>
      <input type="checkbox" name="hil">
      <label for="hil" cherad>Hil</label>
    </checkbox><br>
    <button class="primary pri-shadow">
      <label>Label</label>
      <gradient></gradient>
      <tint>
      </tint>
    </button>
    <button class="secondary sec-shadow">
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <button class="primary" disabled>
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <button class="secondary danger">
      <label>Label</label>
      <gradient></gradient>
      <tint></tint>
    </button><br><br>
    <input type="radio" name="rad">
    <label for="rad" cherad>Hil</label>
    <div style="width: 100px; height: 100px;" class="mat-NSVisualEffectMaterialSidebar shadow-primary"></div><br><br><br>
  </mainse>
</content>

问题原因 #

1. 自定义标签渲染异常：top、content、sidebar等属于非标准HTML标签，浏览器默认将其视为inline元素，无法正确承载布局和内容。
2. Table布局用法错误：display: table-column仅用于定义表格列的样式规则，不能直接作为内容容器，正确的表格布局结构应为table -> table-row -> table-cell。
3. 无可视化标识：sidebar为空且无背景，即使布局正确也无法被看到；背景图未设置覆盖规则，可能导致页面部分区域空白。
4. 无效CSS属性：position: top不是合法的定位属性，无法生效。

修复方案 #

方案1：改用Flex布局（推荐，更现代灵活）

修改CSS：

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  background: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg") no-repeat;
  background-size: cover; /* 让背景图覆盖整个页面 */
}

/* 统一设置自定义标签为块级元素 */
top, content, sidebar, mainse, checkbox, gradient, tint {
  display: block;
}

top {
  margin-bottom: 52px;
}

content {
  display: flex; /* 使用flex布局实现侧边栏+主内容的横向排列 */
  gap: 16px; /* 侧边栏与主内容的间距 */
  height: calc(100% - 52px); /* 减去top的margin，避免内容溢出 */
}

sidebar {
  width: 200px;
  background: rgba(255, 255, 255, 0.8); /* 添加半透明背景，方便看到侧边栏 */
  padding: 8px;
}

mainse {
  flex: 1; /* 让主内容占满剩余宽度 */
  background: rgba(255, 255, 255, 0.8); /* 添加半透明背景 */
  padding: 8px;
  overflow-y: auto; /* 内容过多时可滚动 */
}

方案2：修复Table布局

调整HTML结构并修改CSS：

修改后的HTML

<content>
  <div class="table-row">
    <sidebar></sidebar>
    <mainse>
      <!-- 原mainse内的内容保持不变 -->
    </mainse>
  </div>
</content>

修改后的CSS

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 8px;
  box-sizing: border-box;
  background: url("https://4kwallpapers.com/images/wallpapers/macos-13-macos-ventura-macos-2022-stock-light-5k-retina-2048x1536-8135.jpg") no-repeat;
  background-size: cover;
}

top, content, sidebar, mainse, checkbox, gradient, tint {
  display: block;
}

top {
  margin-bottom: 52px;
}

content {
  display: table;
  width: 100%; /* 表格需设置宽度才能占满容器 */
  height: calc(100% - 52px);
}

.table-row {
  display: table-row;
}

sidebar {
  display: table-cell; /* 使用table-cell作为内容容器 */
  width: 200px;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px;
}

mainse {
  display: table-cell;
  background: rgba(255, 255, 255, 0.8);
  padding: 8px;
}

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