添加white-space: nowrap后表格列宽失效，如何保留百分比列宽并实现文本溢出隐藏？

问题原因 #

表格默认采用table-layout: auto布局，会根据单元格内容自动调整列宽。当你给单元格添加white-space: nowrap后，内容无法换行，会直接撑大列宽，导致预设的百分比列宽失效。

解决方案 #

1. 强制表格使用固定布局
   给表格添加table-layout: fixed样式，让表格优先遵循你设置的列宽规则，而非内容自适应：

/* 假设表格的类是table-container */
.table-container {
  table-layout: fixed;
  width: 100%; /* 必须设置表格宽度，百分比列宽才能生效 */
}

2. 正确设置列宽与单元格样式
   确保列宽百分比直接作用于<td>或<th>元素，同时调整内部容器的宽度以适配单元格：

/* 给每列的td设置对应百分比宽度 */
.table-container td:nth-child(1) { width: 20%; }
.table-container td:nth-child(2) { width: 20%; }
.table-container td:nth-child(3) { width: 20%; }
.table-container td:nth-child(4) { width: 15%; }
.table-container td:nth-child(5) { width: 15%; }
.table-container td:nth-child(6) { width: 10%; }

/* 单元格内部容器样式调整 */
.cell-component {
  width: 100%; /* 改为100%，占满单元格宽度 */
  background-color: aqua;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

如果.cell-component就是<td>本身，直接把对应列的百分比宽度设置给它即可，无需额外内部容器。

原代码小问题 #

原代码中.cell-component的width: 90%不合理：如果是单元格内部元素，会导致内容未占满单元格，影响溢出隐藏效果；如果是单元格本身，90%的宽度会和预设的列百分比冲突，应该替换为对应列的百分比值。

内容的提问来源于stack exchange，提问作者hhpr98