使用 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> 的 <code>table-layout: fixed 配合 cqw 单位虽能适配多列场景，却无法强制少于 4 列时仍维持单列 25% 宽度——因为 cqw 基于容器宽度均分，而 <table> 会自动收缩以适配内容，导致列宽被压缩。<p>此时，推荐采用语义化退化但布局可控的 <strong>CSS Grid 方案</strong>：将 <code>.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 包裹表头与数据（模拟 <th>/<code><td> 结构）：<pre class="brush:php;toolbar:false;"><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></pre><p>配套单元格样式（含边框、内边距与对齐）：</p><pre class="brush:php;toolbar:false;">.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;
}</pre><p>✅ <strong>优势总结</strong>： </p>
<ul>
<li>✅ 严格满足「无论几列，每列恒为容器宽的 25%」； </li>
<li>✅ 天然支持横向滚动（<code>overflow-x: auto），无需额外容器嵌套；
container-type 依赖； grid-auto-columns: repeat(4, 25%) 或 minmax(25%, 1fr) 可进一步增强弹性。⚠️ 注意事项：
- 若需屏幕阅读器友好性，建议保留
<table> 语义，并用 <code>role="presentation"+ ARIA 属性辅助； -
grid-auto-flow: column要求子元素为直系后代，嵌套结构需扁平化； - 移动端小屏下 25% × 4 = 100%，但若列数 > 4，将自动换行至新行（除非加
white-space: nowrap于容器并启用滚动）——本方案已通过overflow-x: auto正确处理。
该方法以布局可控性换取语义灵活性，是现代 CSS 解决“伪固定列宽”问题的简洁可靠实践。
