无固定宽度的表格列为何不随窗口宽度自动调整？

你遇到的核心问题是ellipsis生效需要容器有明确的宽度约束，同时table-layout: auto的布局逻辑会优先根据单元格内容计算列宽，不会主动收缩非固定宽度的列：

• .ellipsis类的text-overflow: ellipsis要生效，必须满足三个条件：white-space: nowrap、overflow: hidden，且容器有确定的宽度/最大宽度限制。
• 你的非固定宽度<td>没有设置宽度约束，浏览器在table-layout: auto模式下，会认为这些列需要足够宽度来容纳内容（哪怕内容可以被截断），所以窗口缩小时不会自动收缩。

给非固定宽度的<td>和<th>添加宽度约束，同时让单元格本身具备截断能力，或者调整表格布局模式：

方案1：给非固定列添加宽度约束（推荐） #

给非固定宽度的列设置max-width，并让单元格支持截断，这样窗口缩小时，这些列会优先收缩并触发ellipsis：

修改后的CSS：

table {
  text-align: left;
  table-layout: auto;
  width: 100%;
}

th,
td {
  padding: 0;
  border: 1px solid #dddddd;
  border-collapse: collapse;
  /* 新增：给非固定列添加基础约束 */
  white-space: nowrap;
  overflow: hidden;
}

th {
  background-color: #f2f2f2;
}

.ellipsis {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
}

.fixedWidth80 {
  width: 80px;
  /* 固定列不需要收缩，强制宽度 */
  flex-shrink: 0;
}

.wrapper {
  background-color: aliceblue;
  width: 100%;
  /* 新增：防止表格溢出容器 */
  overflow-x: auto;
}

方案2：改用table-layout: fixed #

如果希望表格列宽更可控，可以切换到table-layout: fixed，此时表格会优先根据设定的宽度分配空间，剩余宽度自动分给非固定列：

修改后的CSS（仅修改table及相关规则）：

table {
  text-align: left;
  table-layout: fixed; /* 切换为fixed布局 */
  width: 100%;
}

/* 非固定列分配剩余宽度 */
th:not(.fixedWidth80),
td:not(.fixedWidth80) {
  width: calc((100% - 160px) / 3); /* 减去两个固定列的总宽度，平分给3个非固定列 */
  white-space: nowrap;
  overflow: hidden;
}

修改后缩小窗口，非固定宽度的列会自动收缩，同时.ellipsis的文本会正常截断显示省略号。

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