通过 CSS 的 white-space: nowrap 控制特定列的文本换行行为，可让短内容（如图标、单位值）保持单行显示，同时允许长描述列自然折行，从而在不固定列宽的前提下优化表格布局与可读性。
通过 css 的 `white-space: nowrap` 控制特定列的文本换行行为，可让短内容（如图标、单位值）保持单行显示，同时允许长描述列自然折行，从而在不固定列宽的前提下优化表格布局与可读性。
在响应式或 API 驱动的表格中，内容长度不可预知，若任由浏览器自动分配列宽，常会出现“长文本挤压短内容导致其异常换行”的问题——例如 10 GB 被拆成两行，而本应紧凑显示的图标或简短数值反而失去视觉一致性。
解决的关键在于差异化控制各列的换行策略：对含长文本的描述列（如第2列）保留默认 white-space: normal（允许自然折行），而对内容简短、语义紧凑的列（如状态图标、容量数值等）显式设置 white-space: nowrap，强制其单行渲染，避免被压缩换行。
以下为推荐实现方案：
img {
height: 24px;
vertical-align: middle; /* 提升图标对齐体验 */
}
table {
width: 600px;
table-layout: auto; /* 默认行为，兼顾内容自适应 */
border-collapse: collapse;
}
/* 仅锁定第3、4列（Cool / Upgrade）禁止换行 */
td:nth-child(3),
td:nth-child(4),
th:nth-child(3),
th:nth-child(4) {
white-space: nowrap;
}
/* 可选：为描述列添加适度的最小宽度和溢出处理 */
td:nth-child(2) {
min-width: 200px; /* 防止过度压缩 */
word-break: break-word; /* 长单词/URL也能合理折行 */
}
✅ 注意事项：
-
white-space: nowrap仅影响该单元格内文本与内联元素的换行，不影响表格整体列宽计算逻辑； - 若需兼容旧版 IE，避免使用
nth-child，可改用类名（如<td class="no-wrap">）； <li>对含图标+文字的混合单元格（如 <code><td> <img> Done</td>），建议包裹在span中并统一设nowrap，确保整体不拆分； - 若表格列数动态变化，推荐结合 CSS 自定义属性或 JS 动态添加类，而非硬编码
nth-child。
此方法无需 JavaScript、不破坏语义结构、完全基于标准 CSS，兼顾灵活性与表现力，是现代表格排版中平衡“内容自适应”与“视觉稳定性”的轻量级最佳实践。
