嘿，我之前做响应式表格的时候也遇到过一模一样的问题，给你几个实测有效的解决办法：

核心问题原因 #

当把<td>设为display: flex后，浏览器默认会给flex项目加上min-width: auto，这会让单元格强制保持内容的最小宽度，无法随容器收缩——这就是你碰到问题的根源。

具体解决方案 #

1. 解除最小宽度限制，开启收缩能力 #

给移动端的<td>添加min-width: 0和flex-shrink: 1，这是最关键的一步：

@media (max-width: 500px) {
  td {
    display: flex;
    flex-shrink: 1; /* 允许单元格随容器收缩 */
    min-width: 0; /* 打破浏览器默认的最小宽度限制 */
  }
}

2. 控制单元格内文本的溢出与换行 #

如果单元格里有长文本，还需要配合文本溢出控制，避免内容撑大单元格：

@media (max-width: 500px) {
  td {
    display: flex;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden; /* 隐藏超出容器的内容 */
    /* 可选：单行文本显示省略号 */
    text-overflow: ellipsis;
    white-space: nowrap;
    /* 或者多行文本自动换行 */
    /* white-space: normal; */
    /* word-wrap: break-word; */
  }
}

3. 优化父容器的flex布局 #

如果你的<tr>也设置成了flex容器，记得给它加上flex-wrap: wrap，同时给<td>设置合适的flex-basis来控制基础宽度，比如实现两列自适应布局：

@media (max-width: 500px) {
  tr {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* 可选：添加单元格间距 */
  }
  td {
    display: flex;
    flex-shrink: 1;
    min-width: 0;
    flex-basis: calc(50% - 5px); /* 两列布局，减去间距的一半 */
  }
}

4. 移除固定宽度设置 #

检查你的代码，如果给<td>设置了固定的width或者flex-basis（比如width: 200px），改成百分比或者auto，让单元格能完全自适应容器宽度。

这些调整应该能完美解决你表格单元格无法收缩的问题，我在自己的项目里用这套方案处理过大量数据的响应式表格，效果很稳定。

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