用 display: grid 替代 table 可实现列宽严格按内容收缩；正确写法是 grid-template-columns: repeat(auto-fit, fit-content(100%))，而非 min-content，以兼顾紧凑性与防溢出。
表格列宽不随内容收缩？别用 <table>，改用 <code>display: grid
原生 <table> 的列宽行为由 <code>table-layout 控制，设为 auto 时看似“自适应”，实则受首行内容和浏览器默认最小宽度限制，经常撑开整表。真要让每列严格按内容最窄尺寸排布，display: grid 是更可控的选择。
grid-template-columns: repeat(auto-fit, min-content) 为什么不行？
min-content 确实能取单元格内容的固有最小宽度，但直接写 repeat(auto-fit, min-content) 会导致所有列等宽（都取最大那个 min-content 值），失去“各列独立适配”的效果。正确做法是显式定义每列轨道，或用 fit-content() 配合约束。
-
min-content是单个值，不能自动分发到多列 - 想每列独立计算，得用
grid-template-columns: min-content min-content min-content（列数固定时） - 列数不固定？改用
grid-auto-columns: min-content+grid-auto-flow: column，但需配合grid-template-rows控制行数
实用方案：用 fit-content(100%) 替代 min-content
fit-content(100%) 表示“取内容最小宽度和可用空间中较小者”，在网格中既防溢出又保紧凑，比纯 min-content 更健壮。配合 auto-fit 可动态分配列数：
.grid-table {
display: grid;
grid-template-columns: repeat(auto-fit, fit-content(100%)));
grid-auto-rows: minmax(min-content, auto);
gap: 0.5rem;
}
注意：fit-content(100%) 在 Firefox 中支持良好，Chrome 117+ 已修复历史 bug；若需兼容旧版 Chrome，可降级为 max-content 并加 overflow: hidden 截断超长文本。
内容换行与截断怎么控制？
列宽变小后，长文本易撑高行高或溢出。需主动干预：
- 允许换行：
white-space: normal+word-break: break-word - 单行截断：
white-space: nowrap+overflow: hidden+text-overflow: ellipsis（需块级容器设width或max-width） - 避免
min-content被空格/连字符拉长：加hyphens: auto或overflow-wrap: break-word
真正难处理的是含 <input>、<select></select> 等替换元素的单元格——它们的 min-content 计算和普通文本不同，往往偏大，这时得用 width: fit-content 单独重置子元素宽度。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
