使用 CSS Grid 替代传统表格布局，通过 grid-auto-columns: 25% 和 grid-auto-flow: column 实现列宽严格等分，不受实际列数影响，同时支持横向滚动与响应式容器查询。

使用 css grid 替代传统表格布局，通过 `grid-auto-columns: 25%` 和 `grid-auto-flow: column` 实现列宽严格等分，不受实际列数影响，同时支持横向滚动与响应式容器查询。

在 Web 开发中，当需要「视觉上每列固定占容器宽度的 25%」，但实际列数动态变化（例如仅 2 列却仍需各占 25%，留出空白区域），原生

的 table-layout: fixed 配合 cqw 单位虽能适配多列场景，却无法强制少于 4 列时仍维持单列 25% 宽度——因为 cqw 基于容器宽度均分，而 会自动收缩以适配内容，导致列宽被压缩。

此时，推荐采用语义化退化但布局可控的 CSS Grid 方案：将 .table-container 设为 display: grid，并启用列自动扩展机制：

.table-container {
  max-width: 80vw;
  overflow-x: auto; /* 仅水平滚动，避免垂直干扰 */
  margin: auto;
  border: 1px solid #ccc;
  display: grid;
  grid-auto-columns: 25%;     /* 关键：每新增子项自动分配 25% 容器宽度 */
  grid-auto-flow: column;     /* 水平排列子元素（从左到右） */
  gap: 0;                     /* 可选：控制列间间距 */
  padding: 0;
}

每个「逻辑列」用一个 .inner-cell 包裹表头与数据（模拟

/

结构）：

<div class="table-container">
  <div class="inner-cell">
    <div class="header">Column 1</div>
    <div class="data">Data 1</div>
  </div>
  <div class="inner-cell">
    <div class="header">Column 2</div>
    <div class="data">Data 2</div>
  </div>
  <!-- 即使注释掉 Column 3/4，前两列仍各占 25% 宽度 -->
</div>

配套单元格样式（含边框、内边距与对齐）：

.inner-cell {
  min-width: 0; /* 防止内容撑宽破坏 25% 计算 */
  border-right: 1px solid #ddd;
  padding: 8px;
}

.header {
  font-weight: bold;
  border-bottom: 1px solid #ddd;
  margin-bottom: 4px;
}

.data {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 最后一列不显示右侧边框 */
.table-container > .inner-cell:last-child {
  border-right: none;
}

✅ 优势总结：

• ✅ 严格满足「无论几列，每列恒为容器宽的 25%」；
• ✅ 天然支持横向滚动（overflow-x: auto），无需额外容器嵌套；
• ✅ 兼容性好（Chrome 66+/Firefox 63+/Safari 16.4+），且无 container-type 依赖；
• ✅ 易扩展：通过 grid-auto-columns: repeat(4, 25%) 或 minmax(25%, 1fr) 可进一步增强弹性。

⚠️ 注意事项：

• 若需屏幕阅读器友好性，建议保留 语义，并用 role="presentation" + ARIA 属性辅助；
• grid-auto-flow: column 要求子元素为直系后代，嵌套结构需扁平化；
• 移动端小屏下 25% × 4 = 100%，但若列数 > 4，将自动换行至新行（除非加 white-space: nowrap 于容器并启用滚动）——本方案已通过 overflow-x: auto 正确处理。

该方法以布局可控性换取语义灵活性，是现代 CSS 解决“伪固定列宽”问题的简洁可靠实践。