Html 显示为：flex的表格列未对齐

我创建了一个表，出于非常重要的原因，因为我不知道一行中有多少单元格来自后端，这就是为什么我不能使用colspan，可以是一行有2个单元格，第二行有4个单元格，例如，我需要使用flexbox。 但是，当一个单元格中的文本较长时，就会出现问题—然后所有布局都会被破坏

我怎样才能解决这个问题

我申请了：

tr {
display: flex;
flex-direction: row;
}

td {
display: flex;
width: 100%;
}

---

非常感谢你的帮助

您可以通过设置单元格的最小宽度来覆盖溢出行为：

td {
  flex: 1;
  min-width: 0;
}

---

这里的问题是你的td标签有一个显示：flex；属性，但不是弹性值集

如果未定义flex属性，则每个属性将在不包装的情况下占用最大的空间

使用下一个CSS：

td {
  flex:  1;  
}

我建议对于较长的字段，使用较高的flex值，例如flex:4，对于较短的字段，使用较低的flex值，例如flex:1

我附加了一个代码笔，有理想的行为

---

当您没有所述单元格的值时，只需使用包含

Flexbox不会在较大的上下文表中对齐列。您可以使用display:table row和display:table column作为替代。感谢您提供CSS，但是您也可以提供相关的HTML吗？没有它很难回答这个问题。如果您可以更新您的问题以在一个列表中列出所有相关代码，这将有所帮助。如果您的HTML是在服务器端生成的，请发布输出。有关更多信息，请参阅帮助文章：如果您使用的是最适合这种布局的table…我不明白您为什么在tr中使用flex…？我们无法调试映像，我们需要一个工作代码段才能提供正确的答案。另外，当您说您不知道从后端返回什么时，唯一明智的解决方案是使用脚本。