CSS+HTML 70/30两栏布局右侧颜色键配置求助

1. 调整颜色键表格的HTML结构 #

把颜色键表格拆分为「颜色块单元格」和「描述文本单元格」，确保结构清晰易维护：

<!-- 右侧栏的颜色键表格 -->
<table class="color-key">
  <tbody>
    <tr>
      <td class="color-block block-high"></td>
      <td class="color-desc">高优先级任务</td>
    </tr>
    <tr>
      <td class="color-block block-medium"></td>
      <td class="color-desc">中优先级任务</td>
    </tr>
    <tr>
      <td class="color-block block-low"></td>
      <td class="color-desc">低优先级任务</td>
    </tr>
  </tbody>
</table>

2. 编写CSS实现颜色键效果 #

结合你的70/30两栏布局，添加以下样式：

/* 70/30两栏布局基础样式（如果你的现有布局逻辑不同，可替换为自己的代码） */
.layout-wrapper {
  display: flex;
  gap: 24px;
  padding: 16px;
}
.left-panel {
  flex: 0 0 70%;
}
.right-panel {
  flex: 0 0 30%;
  display: flex;
  flex-direction: column;
  gap: 16px; /* 两个表格的间距 */
}

/* 颜色键表格专属样式 */
.color-key {
  border-collapse: collapse;
  width: 100%;
}
.color-key tr {
  height: 32px;
}
.color-block {
  width: 32px;
  padding: 0;
  border: 1px solid #eee;
  border-radius: 4px; /* 可选：给颜色块加圆角 */
}
/* 自定义颜色值，对应目标效果调整 */
.block-high {
  background-color: #ff6b6b;
}
.block-medium {
  background-color: #ffd93d;
}
.block-low {
  background-color: #6bcb77;
}
.color-desc {
  padding-left: 12px;
  font-size: 14px;
  vertical-align: middle;
}

3. 适配现有代码的注意事项 #

• 如果你的两栏布局用的是Grid布局，把.layout-wrapper样式替换为：

  .layout-wrapper {
    display: grid;
    grid-template-columns: 70% 30%;
    gap: 24px;
    padding: 16px;
  }
  

• 颜色块的尺寸、颜色值、圆角等细节，可完全匹配你的目标效果图片调整
• 若右侧栏内容过长，可给.right-panel添加overflow-y: auto实现滚动

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