HTML表格中利用CSS Intrinsic Sizing控制内容自适应宽度-html教程-PHP中文网

width: max-content 会让表格列“撑爆”容器，因其取内容最长一行像素宽，无空格长字符串不折行；应改用 fit-content() 配合 table-layout: fixed、white-space: normal 等策略控制列宽。

html表格中利用css intrinsic sizing控制内容自适应宽度

width: max-content 为什么会让表格列“撑爆”容器

直接给 <th> 或 <code><td> 设 <code>width: max-content，常导致整列宽度失控——它不是“尽量窄”，而是“内容最长一行的像素宽”。一个无空格长字符串（如 https://example.com/path/to/resource）会被算作一整行，浏览器不会自动折断，只会硬撑。

常见错误现象：max-content 写了但列宽没变化，或在小屏下触发横向滚动条。根本原因通常是：

没配 white-space: normal（默认值即可，但若父级或自身设了 nowrap 就会失效）
table-layout: auto 下，width 声明会被内容驱动逻辑覆盖；只有 table-layout: fixed 才真正尊重 width
未限制 max-width，导致长文本无限扩张

fit-content() 是表格列宽度的实际可行解

width: fit-content() 不是 max-content 的简化版，而是一套带边界的自适应策略：它取 min(max-content, max(min-content, available-width))。也就是说，列宽会随内容自然伸缩，但绝不会窄于单字宽度，也不会宽过父容器剩余空间。

典型写法（需配合 table-layout: fixed）：

table {
  width: 100%;
  table-layout: fixed;
}
th, td {
  width: fit-content();
  min-width: 80px; /* 防止过窄 */
  max-width: 240px; /* 防止过宽 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

注意：fit-content() 在 <table> 上无效，必须作用于 <code><th>/<code><td>；且 Safari 14.1+、Chrome 82+ 支持，IE 全系不支持。<h3>min-content 在表格中基本没用，除非你真想让列宽等于一个汉字</h3> <p><code>width: min-content 的计算逻辑是“内容可换行时的最小单位宽度”：英文按单词，中文按单字。结果往往是 14px（一个汉字渲染宽度），然后被 table-layout: auto 拉伸覆盖，或在 fixed 下导致列严重压缩、文字挤成一团。