本文介绍如何使用纯 CSS Grid 模拟 HTML <table> 的列宽自动对齐行为：让每列宽度由该列所有单元格中内容最宽者决定，且整列保持统一宽度，无需 JavaScript。

本文介绍如何使用纯 css grid 模拟 html `

CSS婚礼策划服务机构宣传网站模板

CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。

下载

` 的列宽自动对齐行为：让每列宽度由该列所有单元格中内容最宽者决定，且整列保持统一宽度，无需 javascript。

在构建数据密集型界面时，原生 <table> 标签虽能天然实现“按列内容自适应宽度”，但其严格的 DOM 结构（如仅允许 <tr>/<td> 等子元素）限制了复杂交互组件（如嵌套表单、可拖拽区域、动态卡片等）的嵌入。此时，CSS Grid 成为理想的替代方案——但默认的 grid-template-columns: repeat(13, auto) 会导致每行独立计算列宽，破坏列对齐；而 1fr 则强制等宽，失去内容驱动的灵活性。

关键在于两个协同生效的 CSS 声明：

• grid-template-columns: repeat(N, auto)：启用基于内容的列宽计算；
• width: fit-content（而非 100% 或 max-content）：使整个网格容器收缩包裹其所有行共同约束下的列宽最大值，从而实现跨行列对齐。

✅ 正确做法示例（13 列场景）：

.grid {
  display: grid;
  grid-template-columns: repeat(13, auto);
  width: fit-content;     /* 核心！让容器宽度由全局列宽最大值决定 */
  gap: 1px;
  border: 1px solid #000;
}

.grid .cell {
  padding: 8px 12px;
  border: 1px solid #ccc;
  min-width: 0; /* 防止长文本溢出破坏布局（可选） */
}

⚠️ 注意事项：

立即学习“前端免费学习笔记（深入）”；

• fit-content 是关键：若设为 width: 100%，浏览器会先按父容器分配空间，再分配 auto 列宽，导致列宽被压缩或错位；max-content 则可能过度撑开容器。
• 避免 minmax() 或 fr 混用：auto 必须纯粹，混入 1fr 或 minmax(0, 1fr) 会触发弹性算法，破坏内容驱动逻辑。
• 响应式补充建议：在小屏设备上，可配合 @container（需支持）或媒体查询将 grid-template-columns 切换为 1fr 并启用滚动，保障可读性。
• 无障碍提示：虽视觉上模拟表格，但仍需通过 role="table"、role="row"、role="cell" 及 aria-label 显式声明语义，确保屏幕阅读器正确解析。

总结：仅用标准 CSS（Grid + fit-content）即可精准复现 <table> 的列宽对齐机制，兼顾结构自由度与布局智能性。无需 JavaScript 计算、无需 Flexbox 折中（Flexbox 无法跨行对齐列宽）、更无需放弃语义化——只需理解 fit-content 在 Grid 上下文中的“全局列宽收敛”作用，即可优雅落地。